静下心来我还是可以的-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

}

相关推荐
魂兮归乡2 小时前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
平行云2 小时前
如何实现UE程序大并发多集群的像素流部署
unity·ue5·图形渲染
quant_19868 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
赵谨言16 小时前
基于物联网的智能家居控制系统设计与实现
经验分享·毕业设计
ONETHING_CLOUD_221 小时前
手机能用酒精擦吗?
经验分享·科技·智能手机·数码·实用技巧分享
向宇it1 天前
【unity小技巧】在 Unity 中将 2D 精灵添加到 3D 游戏中,并实现阴影投射效果,实现类《八分旅人》《饥荒》等等的2.5D游戏效果
游戏·3d·unity·编辑器·游戏引擎·材质
evamango1 天前
《Unity Shader入门精要》二、渲染流水线
unity3d
向宇it1 天前
Unity Universal Render Pipeline/Lit光照材质介绍
游戏·unity·c#·游戏引擎·材质
IT摆渡者1 天前
网络安全护网实战:攻击手段解析与防御策略
运维·网络·经验分享
__water2 天前
RHA《Unity兼容AndroidStudio打Apk包》
android·unity·jdk·游戏引擎·sdk·打包·androidstudio