欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Unity打包WebGL所遇到的坑

程序员文章站 2022-05-23 14:00:53
...

1.窗口自适应问题
unity打包好WebGL包体时生成index.html，用文本编辑器打开修改里面的代码

在<script>添加Reset()函数
<script>
       function Reset()
       {
        var canvas = document.getElementById("#canvas");//获取#canvas
        canvas.height=  document.documentElement.clientHeight;//获取body可见区域高度
        canvas.width =  document.documentElement.clientWidth;//获取body可见区域高度
        }
    </script>
在<body>里面调用函数，并修改长宽占比
<body>
<body onresize="Reset()" ,scroll= no, style="overflow:hidden">  
   <div class="webgl-content"style="width: 100%; height: 100%" >
      <div id="gameContainer" style="width: 100%; height: 100%;margin:auto" ></div> 
      </div>
    </div>
  </body>

2.unity webgl 移动端 去掉提示框
每次用移动端打开时都要跳出：Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway. 然后点击OK就可以了，去掉方法1.打开打包好的文件如图所示（最终打开UnityLoader.js）
Unity打包WebGL所遇到的坑

//UnityLoader.js 里面替换下面函数就可以了
compatibilityCheck:function(e,t,r){
    UnityLoader.SystemInfo.hasWebGL?
        UnityLoader.SystemInfo.mobile?
            t()
            :["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?
                t()
                :t()
        :e.popup("Your browser does not support WebGL",[{text:"OK",callback:r}])
    },
    // compatibilityCheck:function(e,t,r){
    //  UnityLoader.SystemInfo.hasWebGL?
    //      UnityLoader.SystemInfo.mobile?
    //          e.popup("Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.",[{text:"OK",callback:t}])
    //          :["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?
    //              e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.",[{text:"OK",callback:t}])
    //              :t()
    //      :e.popup("Your browser does not support WebGL",[{text:"OK",callback:r}])
    // },
    Blobs:{},loa...(省略)

自己亲测可以成功，如有问题欢迎留言

上一篇： IEEETrans.cls模板使用排坑

下一篇： three.js学习一

推荐阅读