项目场景：
做了个unity webgl项目，主要展示3D场景，除了一个鼠标悬停建筑展示信息的弹窗，没有其他的UI元素。
问题描述：
在unity里一切都好，可发布之后发现webgl上UI图片消失了（一个image上两个Text子物体，Text在，image消失了）。
原因分析：
首先分析了下是不是image组件失效、unity发布配置等问题或bug。后来经过调试发现是html代码不同使image组件的rect变形了，屏幕适应导致的问题；即：原本发布的自带index.html里面是用的px单位，
<div id="unityContainer" style="width: 1920px; height: 1080px"></div>
而前端目的是想让场景要随浏览器窗口大小自适应，用的百分比vh和vw，
<div id="unityContainer" style="width: 100vw;
这样的问题就导致了unity webgl自己的自适应识别错误（unity的Canvas我用的是随屏幕大小缩放），UI消失了。
但是用回px就导致浏览器缩放时场景不能变小，出现了滚动条。
解决方案：
调试html canvas元素。
具体比较代码了解：
旧：
<!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 | 工厂</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/yinduweb.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 1920px; height: 1080px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">工厂</div>
</div>
</div>
</body>
</html>
新：
<!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 | 工厂</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
function Reset()
{
var canvas = document.getElementById("#canvas");
var h= document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;
var scale = 1920/1080;
if (w/h > scale) {canvas.height=h;canvas.width=h*scale;}
if (w/h < scale) {canvas.height=w/scale;canvas.width=w;}
}
</script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/yinduweb.json", {onProgress: UnityProgress});
</script>
</head>
<body onload="Reset()" onresize="Reset()" style="margin: 0;">
<div class="webgl-content">
<div id="unityContainer" style="width: 100vw; background-color: aquamarine"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">工厂</div>
</div>
</div>
</body>
</html>
|