Unity 发布webgl 网页自适应解读canvas

tianyongheng

已于 2022-05-31 16:07:05 修改

阅读量1.2w

点赞数 5

分类专栏： unity 文章标签： webgl unity

于 2017-11-25 19:53:55 首次发布

本文链接：https://blog.csdn.net/tianyongheng/article/details/78633787

版权

unity 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

unity 发布 weblgl 后如果打不开 IIS 服务器需要添加以下内容

MIME类型添加： .json text/json
.unity3d application/octet-stream
.unityweb application/binary

本章节重点敲黑板：
以下代码解决自适应

<script>
        //页面大小重绘监听函数
		window.onresize = selfAdaption;
		function selfAdaption(){
		   //document.getElementById("unityContainer") 找到id 为unityContainer div 块 
			var unityContainer = document.getElementById("unityContainer");
			//canvas 在页面上官方示例上是看不到的，那么canvas在哪里，设置到底有没有用
			//其实 canvas 是unityloader.js 在加载时 代码创建的动态画布
			//var e=document.createElement("canvas") 该行代码可以在unityloader.js中找到
			var unitycanvas = document.getElementById("#canvas");
			unityContainer.style.width = "100vw";
			unityContainer.style.height = "100vh";
			unitycanvas.style.width = "100vw";
			unitycanvas.style.height = "100vh";		
		}
	</script>

<!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 | WebglTest</title>
    <!-- 不需要加载unity默认样式 -->
    <!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
    <!-- <link rel="stylesheet" href="TemplateData/style.css"> -->
     <!-- 不需要加载unity进度条 -->
    <!-- <script src="TemplateData/UnityProgress.js"></script> -->
    <script src="Build/UnityLoader.js"></script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Webgl.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body >
    <div class="webgl-content" style="overflow:hidden;">
      <div id="unityContainer" style="width: 100%; height: 100%;margin:auto" ></div>
      <div class="footer">
        <!-- 不需要显示logo -->
        <!-- <div class="webgl-logo"></div> -->
         <!-- 不需要全屏按钮 -->
        <!-- <div class="fullscreen" οnclick="unityInstance.SetFullscreen(1)"></div> -->
        <!-- 不需要标题 -->
        <!-- <div class="title">WebglTest</div> -->
      </div>
    </div>
	<script>
		window.onresize = selfAdaption;
		function selfAdaption(){
			var unityContainer = document.getElementById("unityContainer");
			var unitycanvas = document.getElementById("#canvas");
			unityContainer.style.width = "100vw";
			unityContainer.style.height = "100vh";
			unitycanvas.style.width = "100vw";
			unitycanvas.style.height = "100vh";		
		}
	</script>
  </body>
</html>

tianyongheng

关注

5
点赞
踩
38

收藏

觉得还不错? 一键收藏
打赏
3
评论
Unity 发布webgl 网页自适应解读canvas

unity 发布webgl后找到index.html然后在 head 里添加代码<head> <script> function Reset() { var canvas = document.getElementById("#canvas");//获取#canvas canvas.height= document.documentElem
复制链接

扫一扫