如何以编程方式推迟或加载A-Frame场景?

ngo*_*vin 2 aframe

我有一个A-Frame场景,我想放在一个页面上,但我希望它只在我告诉它时加载.这意味着在我发出事件或调用方法之前,它不应该呈现或运行.

<body>
  <!-- Don't play yet. -->
  <a-scene>
  </a-scene>
</body>
Run Code Online (Sandbox Code Playgroud)

ngo*_*vin 9

目前没有内置+文档化方式,但稍后会有一个功能.但是,有几种方法可以手动执行此操作:

创建 <a-node>

节点(每个节点<a-entity>都会继续阻止场景加载直到它调用.load()事件.

在场景中创建一个虚拟节点.并.load()在准备好时打电话.

<a-node id="dummy"></a-node>

document.getElementById('dummy').load();
Run Code Online (Sandbox Code Playgroud)

利用资产系统

您可以创建一个永远不会加载的资产,直到您告诉它,并将超时设置为有效无限期(稍后我们将添加一个不超时的功能).

<a-scene>
  <a-assets timeout="999999999">
    <a-asset-item id="trigger" src="NEVERLOADUNTILITELLITTO.whatever"></a-asset-item>
  </a-assets>
</a-scene>
Run Code Online (Sandbox Code Playgroud)

然后触发.

document.querySelector('#trigger').load();
Run Code Online (Sandbox Code Playgroud)

仅在准备好时注入场景

您可以将场景保存在单独的文件,模板或字符串中,或​​者使用具有视图概念的框架.只有在准备好渲染时才将场景注入DOM.这是最多的工作,但目前是最气密的方法.

sceneEl.appendChild(document.createRange().createContextualFragment(str));

尽快暂停现场

这将暂停渲染场景.但是,场景可能已经初始化了一些组件并且已经渲染了几帧.所以它不是气密的.

document.querySelector('a-scene').pause();
Run Code Online (Sandbox Code Playgroud)