静下心来我还是可以的-unitywebgl 滑动条增加

<!DOCTYPE html>

<html lang="en-us">

<head>

<meta charset="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Unity WebGL Player | QuFuBaoDianWebGL</title>

<link rel="stylesheet" href="TemplateData/style.css" /> <!--增加样式-->

</head>

<body>

<canvas id="unity-canvas"></canvas>

<div id="unity-loading-bar">

<div id="unity-progress-bar-empty">

<div id="unity-progress-bar-full"></div>

</div>

</div>

<script src="Build/DaTongBuild20240424.loader.js"></script>

<script src="./Extend.js"></script>

<script>

var canvas = document.querySelector("#unity-canvas");

const config =

{

dataUrl: "Build/DaTongBuild20240424.data.unityweb",

frameworkUrl: "Build/DaTongBuild20240424.framework.js.unityweb",

codeUrl: "Build/DaTongBuild20240424.wasm.unityweb",

streamingAssetsUrl: "StreamingAssets",

companyName: "DefaultCompany",

productName: "QuFuBaoDianWebGL",

productVersion: "0.1",

};

/*增加显示*/

document.querySelector("#unity-loading-bar").style.display = "block";

createUnityInstance(canvas, config, (progress) =>

{

document.querySelector("#unity-progress-bar-full").style.width =

100 * progress + "%";

}).then((unityInstance) => {

document.querySelector("#unity-loading-bar").style.display = "none";

}).catch((message) => {

alert(message);

});

</script>

</body>

</html>


body,html {

padding: 0;

margin: 0;

width: 100%;

height: 100%;

overflow: hidden;

}

#unity-canvas {

width: 100%;

height: 100%;

background: #231f20

}

#unity-loading-bar {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

display: none;

z-index: 1000;

}

#unity-logo {

width: 154px;

height: 130px;

background: url('unity-logo-dark.png') no-repeat center

}

#unity-progress-bar-empty {

width: 141px;

height: 18px;

margin-top: 10px;

margin-left: 6.5px;

background: url('progress-bar-empty-dark.png') no-repeat center

}

#unity-progress-bar-full {

width: 0%;

height: 18px;

margin-top: 10px;

background: url('progress-bar-full-dark.png') no-repeat center

}

#unity-footer {

position: relative

}

相关推荐
技术小赵11 小时前
优化Facebook广告投放的五大关键策略
经验分享
死也不注释12 小时前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
智者知已应修善业16 小时前
【51单片机节日彩灯控制器设计】2022-6-11
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
Yo_Becky20 小时前
【PyTorch】PyTorch预训练模型缓存位置迁移,也可拓展应用于其他文件的迁移
人工智能·pytorch·经验分享·笔记·python·程序人生·其他
ONETHING_CLOUD_221 小时前
电脑系统重装有什么用?
经验分享·科技·计算机·电脑·数码
会的全对٩(ˊᗜˋ*)و21 小时前
【数据挖掘】数据挖掘综合案例—银行精准营销
人工智能·经验分享·python·数据挖掘
小赖同学啊21 小时前
物联网中的Unity/Unreal引擎集成:数字孪生与可视化控制
物联网·unity·游戏引擎
future14121 天前
每日问题总结
经验分享·笔记
Zlzxzw1 天前
使用unity创建项目,进行动画制作
unity·游戏引擎
LilySesy1 天前
ABAP+&SFSY-FORMPAGES&变成星号
经验分享·sap·abap·erp系统·smartforms