隐藏嵌入式框架场景

Question

我想以编程方式隐藏和显示我嵌入的框架场景。加载网站时场景是隐藏的，但是我只能像这样延迟工作：

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

当我不添加此延迟时，即使再次将其设置为 'visible'，场景仍然隐藏。具体来说，canvas 的大小似乎调整为 0px:

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

使其可见的唯一方法是调整浏览器 window 的大小，这似乎会调整 canvas.

的大小

有没有更好的不延迟隐藏场景的方法？

Answer 1

据我所知（帖子 here, or here），如果您在整个 canvas 加载之前设置 display: none，canvas / renderer / camera 属性设置不正确。

我试着等待 a-scene 的 loaded/renderstart 事件、window.onload 和内部实体，但它似乎仍然把 canvas设置。

当你调整 window 大小时它工作的原因是因为场景有一个 resize 的侦听器，它使用 canvas width 相应地更新所有这些/ height。我不确定是否可以手动调用 resize。

看看here -> 搜索this.resize，有3个命中，一个在a-scene.

如果在固定位置的a-framecanvas前面放置一个空白<div>似乎更容易和更安全，它将从display: none切换到block。直播 fiddle here !

一旦场景启动运行，您可以随心所欲地切换它 display！直播 fiddle here !

Hiding an embedded aframe scene