隐藏嵌入的框架场景

Question

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

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

据我所知（here 或 here 之类的帖子），如果您在整个画布加载之前设置 display: none，则不会设置 canvas / renderer / camera 属性适当地。

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

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

查看here -> 只需搜索this.resize，有3 个命中，a-scene 中有一个。

---

如果 a-frame 画布的前面位置固定，放置一个空白<div> 似乎更容易更安全，它将从display: none 切换到block。现场小提琴here！

一旦场景启动并运行，您可以随意切换其display！现场小提琴here！