ToB企服应用市场:ToB评测及商务社交产业平台

标题: 静下心来我还是可以的-unitywebgl 滑动条增加 [打印本页]

作者: 前进之路 时间: 2024-9-13 04:58
标题: 静下心来我还是可以的-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
}

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)