无法在 Unity WebGL 构建的全屏画布上覆盖 div
Posted
技术标签:
【中文标题】无法在 Unity WebGL 构建的全屏画布上覆盖 div【英文标题】：Can Not Overlay div Over Full Screen Canvas for Unity WebGL Build 【发布时间】：2022-01-15 03:32:52 【问题描述】：我想在全屏 Unity - Canvas 前面覆盖一个 div。我可以在它不是全屏时覆盖它，但在画布处于全屏模式时无法弄清楚如何覆盖 Unity Canvas 的 div 前面。
我在 Unity WebGL 构建的 index.html 文件中制作了加载 CSS。我粘贴在下面。
<style>
.loader
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
/* Safari */
@-webkit-keyframes spin
0% -webkit-transform: rotate(0deg);
100% -webkit-transform: rotate(360deg);
@keyframes spin
0% transform: rotate(0deg);
100% transform: rotate(360deg);
</style>
<div id="modelLoading" class="loader"></div>
我将此 CSS 用作 div 的类，基本上，div 显示在正常窗口中，如下图所示，但它在全屏窗口中消失。也试过：全屏的东西，但没有用。
我在下面添加屏幕截图和完整的 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 | DeleteThisWebGLMultiThreadWorks2</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
<style>
.loader
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
/* Safari */
@-webkit-keyframes spin
0% -webkit-transform: rotate(0deg);
100% -webkit-transform: rotate(360deg);
@keyframes spin
0% transform: rotate(0deg);
100% transform: rotate(360deg);
</style>
<div id="modelLoading" class="loader"></div>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600>
</canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">DeleteThisWebGLMultiThreadWorks2</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type)
function updateBannerVisibility()
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function()
warningBanner.removeChild(div);
updateBannerVisibility();
, 5000);
updateBannerVisibility();
var buildUrl = "Build";
var loaderUrl = buildUrl + "/DeleteThisTryingMultiThreadWebGL8.loader.js";
var config =
dataUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.data.gz",
frameworkUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.framework.js.gz",
codeUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.wasm.gz",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "DeleteThisWebGLMultiThreadWorks2",
productVersion: "0.1",
showBanner: unityShowBanner,
;
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|android/i.test(navigator.userAgent))
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
unityShowBanner('WebGL builds are not supported on mobile devices.');
else
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
canvas.style.width = "960px";
canvas.style.height = "600px";
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () =>
createUnityInstance(canvas, config, (progress) =>
progressBarFull.style.width = 100 * progress + "%";
).then((unityInstance) =>
loadingBar.style.display = "none";
fullscreenButton.onclick = () =>
unityInstance.SetFullscreen(1);
;
).catch((message) =>
alert(message);
);
;
document.body.appendChild(script);
</script>
</body>
</html>
【问题讨论】：
CSS show up 到底是什么意思？ CSS 是一个样式表，它定义了某些元素的外观/行为方式......如果这些元素因为您处于全屏模式而不可见，那么 CSS 就没有任何关系......
抱歉定义错误，我对前端的东西了解不多。实际上，正如您警告的那样，有一个 div 以 CSS 作为其类。该 div 以正常模式显示，但不以全屏显示。在 CSS 中可以定义一个 :fullscreen 类，它可以在全屏模式下改变 CSS 的行为，所以这就是为什么我认为它与 CSS 相关。
对不起，我真的不明白你到底想要达到什么目的。如果您进入全屏模式，则意味着只有 WebGL 播放器可见，没有更多的 HTML 内容……您可以通过点击退出全屏
我只是简化了这个问题，我实际上是在运行时加载 3D 模型，但是在加载模型时 WebGL 屏幕冻结并且当时没有响应。我只想制作一个没有 WebGL 的加载屏幕，这样用户就不会意识到 WebGL 冻结了。
啊，我明白了。你的意思是加载圈的东西由于全屏而消失了。我猜没有太多选择：要么将其内置到 Unity 本身中并使您的对象加载尽可能“异步”，要么使用特殊的 javascript 代码，您的 c# 代码可以interact 使用并调用您启用和禁用的某些事件同时加载覆盖/元素并退出/隐藏WebGL内容
【参考方案1】：
您可以制作整个画布容器，而不是要求统一库制作画布全屏
fullscreen 自己使用 JavaScript 和 DOM API。
这样，您将拥有更多的控制权。请参见下面的演示代码。解释在代码 cmets.
由于您尚未共享您的 CSS 和 javascript 库，因此我添加了自己的样式用于演示目的。
将整个代码放入本地 .html 文件并在浏览器中运行。然后按Fullscreen。您会注意到旋转加载器与画布一起全屏显示。
<!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 | DeleteThisWebGLMultiThreadWorks2</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<style>
.loader
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
/* Safari */
@-webkit-keyframes spin
0%
-webkit-transform: rotate(0deg);
100%
-webkit-transform: rotate(360deg);
@keyframes spin
0%
transform: rotate(0deg);
100%
transform: rotate(360deg);
/* new rules ********/
#unity-container
width: 97vw;
height: 90vh;
border: 3px solid orange;
background-color: gray;
#fullScreenContainer
position: relative;
height: 100%;
width: 100%;
#unity-canvas
background-color: black;
/* note the dimensions are in percentages */
/* they'll scale with parent, as parent goes fullscreen*/
/* the canvas will grow as well*/
width: 100%;
height: 100%;
margin: 0 auto;
#unity-fullscreen-button
border: 1px solid black;
width: fit-content;
color: Orange;
font-size: 2em;
#unity-fullscreen-button:hover
background-color: lightgreen;
body
margin: 0;
padding: 0;
box-sizing: border-box;
</style>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<!-- take this container fullscreen instead of taking only the canvas -->
<div id="fullScreenContainer">
<div id="modelLoading" class="loader"></div>
<canvas id="unity-canvas"></canvas>
</div>
<div id="unity-footer">
<div id="unity-fullscreen-button">FullScreen</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var fullContainer = document.querySelector("#fullScreenContainer");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
fullscreenButton.onclick = () =>
//don't request fullscreen on unityinstance
//unityInstance.SetFullscreen(1);
//let's take things fullscreen ourselves
//request fullscreen on the wrapper
fullContainer.requestFullscreen();
//you might want to resize canvas to fit screen.
;
//ignore this just for the demo
var canvas = document.getElementById("unity-canvas");
var ctx = canvas.getContext("2d");
ctx.font = "bold 24px verdana, sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "green";
ctx.fillText("The Game", 150, 80);
ctx.closePath();
</script>
</body>
</html>
我认为，如果您在 chrome 开发者控制台中调试 unityInstance.SetFullscreen(1)，那么您会发现它做了类似的事情：调整画布大小并在其上调用 requestFullscreen()。
注意： *** 和其他在线 html 编辑器不允许全屏，因此您必须尝试本地 .html 文件中的代码。
修复后您的代码将如下所示：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Xplore 3D Model Editor</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<style>
#modelLoading
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
#modelLoading:fullscreen
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
/* Safari */
@-webkit-keyframes spin
0%
-webkit-transform: rotate(0deg);
100%
-webkit-transform: rotate(360deg);
@keyframes spin
0%
transform: rotate(0deg);
100%
transform: rotate(360deg);
</style>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<div id="modelLoadingContainer">
<div id="modelLoading"></div>
<!-- //*** removed inline dimensions. setting inline style is not good -->
<canvas id="unity-canvas"></canvas>
</div>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button">
</div>
<div id="unity-build-title">Xplore 3D Model Editor</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
var modelLoading = document.getElementById('modelLoading');
function EnableModelLoading()
document.getElementById("modelLoading").style.display = "";
function DisableleModelLoading()
document.getElementById("modelLoading").style.display = "none";
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type)
function updateBannerVisibility()
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function ()
warningBanner.removeChild(div);
updateBannerVisibility();
, 5000);
updateBannerVisibility();
var buildUrl = "Build";
var loaderUrl = buildUrl + "/Xplore3DModelEditorOnHeroku5.loader.js";
var config =
dataUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.data.unityweb",
frameworkUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.framework.js.unityweb",
codeUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "Timelooper",
productName: "Xplore 3D Model Editor",
productVersion: "0.1",
showBanner: unityShowBanner,
;
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent))
container.className = "unity-mobile";
// Avoid draining fillrate performance on mobile devices,
// and default/override low DPI mode on mobile browsers.
config.devicePixelRatio = 1;
unityShowBanner('WebGL builds are not supported on mobile devices.');
else
//*** changes set minWidth instead of fixed width
canvas.style.minWidth = "960px";
canvas.style.minHeight = "600px";
//100% will ensure canvas will be of parent size
canvas.style.width = "100%";
canvas.style.height = "100%";
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () =>
//DisableleModelLoading();
createUnityInstance(canvas, config, (progress) =>
progressBarFull.style.width = 100 * progress + "%";
).then((unityInstance) =>
loadingBar.style.display = "none";
//*** hide loading
modelLoading.style.display = "none";
).catch((message) =>
alert(message);
);
;
document.getElementById('unity-fullscreen-button').addEventListener('click', function ()
var elem = document.getElementById('modelLoadingContainer');
elem.webkitRequestFullscreen();
if (elem.requestFullscreen)
elem.requestFullscreen();
else if (elem.msRequestFullscreen)
elem.msRequestFullscreen();
else if (elem.mozRequestFullScreen)
elem.mozRequestFullScreen();
else if (elem.webkitRequestFullscreen)
elem.webkitRequestFullscreen();
);
document.body.appendChild(script);
</script>
</body>
</html>
您可能需要调整 fullScreenContainer 元素的样式。
【讨论】：
感谢您的帮助。是的，现在加载 div 以全屏模式显示，但游戏不显示，黑屏前只能看到“游戏”文本，如果我删除 ctx 部分，则加载 CSS 时只会显示黑屏。 他们可能正在创建自己的画布元素。如果没有我的修复检查，请检查 Chrome 开发人员工具，unity-container html 元素下是他们的新画布。就像他们在Stackblitz demo 或codesandbox demo 中所做的那样。如果您可以在没有我对 stackblitz 或 codeandbox 的修复的情况下共享一个最小的演示应用程序，我没有设置开发环境。
我已经更新了答案，添加了修复后整个代码的外观。如果您错过了 createUnityInstance 部分。
这是一个小的样式问题。我删除了内联样式并添加了百分比样式，并且在内容加载后也隐藏了提货微调器。现在它会显示您第一次加载的时间以及加载模型的时间。这是pastebin link。搜索 //*** 以查看更改。顺便说一句，很酷的模型！
是的，我在 Artec3d 上找到了类似的演示内容 :) 您可以根据您最近的更改来重构上面的答案，以帮助像我这样在前端事物上比较落后的 Unity 开发人员 :) 在最后，非常感谢您的帮助。以上是关于无法在 Unity WebGL 构建的全屏画布上覆盖 div的主要内容，如果未能解决你的问题，请参考以下文章