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

打印 上一主题 下一主题

主题 518|帖子 518|积分 1554

<!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企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

前进之路

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表