隐藏嵌入的 aframe 场景

Question

我想以编程方式隐藏和显示我嵌入的 aframe 场景。当网站加载时场景是隐藏的，但是我只能让它在这样的延迟下工作：

window.onload = function () {
setTimeout(function() { document.getElementById("scene-page").setAttribute("hidden", ""); }, 500);
}

当我不添加此延迟时，即使再次将其设置为“可见”，场景仍然处于隐藏状态。具体来说，画布的大小似乎被调整为 0px：

<canvas class="a-canvas a-grab-cursor" data-aframe-canvas="true" width="0" height="0" style="width: 0px; height: 0px;"></canvas>

使其可见的唯一方法是调整浏览器窗口的大小，然后似乎调整画布的大小。

有没有更好的方法可以毫不拖延地隐藏场景？

Answer 1

从我所看到的（像这里或这里的帖子），如果您display: none在整个画布加载之前设置，canvas//renderer属性camera将无法正确设置。

我尝试等待a-scene's loaded/renderstart事件、window.onload和内部实体，但它似乎仍然弄乱了画布设置。

当您调整窗口大小时它起作用的原因是因为场景有一个侦听器，该侦听器会使用 canvas /resize相应地更新所有这些内容。我不确定是否可以手动调用。widthheightresize

在这里查看-> 只需搜索this.resize，就有 3 个命中，其中一个在a-scene.

<div>在具有固定位置的 A 框画布前面放置空白似乎更容易、更安全，该位置将从 切换display: none到block。现场小提琴在这里！

一旦场景启动并运行，您就可以display随意切换它！现场小提琴在这里！