AFrame：有没有一种方法可以使用不同的组件重新加载场景？

问题描述

我用AR.js定义了以下场景：

<a-scene vr-mode-ui='enabled: false'
             embedded
             arjs-webcam-texture>
    <a-camera rotation-reader
              gps-camera></a-camera>
    <!-- some a-entities-->
</a-scene>

基本上我想要的是删除AR.js组件并将某些实体添加到纯AFrame场景而无需重新加载页面。可能吗？我尝试过这种方法，但是一切都变白了，之后什么也没发生：

    const scene = document.querySelector('a-scene')
    scene.removeAttribute('arjs-webcam-texture');
    scene.setAttribute('fog')
    const camera = document.querySelector('a-camera')
    camera.removeAttribute('gps-camera');
    document.querySelectorAll('a-entity').forEach(e => {
        e.parentNode.removeChild(e);
    });

    const Box = document.createElement('a-Box');
    Box.setAttribute('rotation','0 45 45')
    Box.setAttribute('scale','2 2 2')
    Box.setAttribute('position','0 2 -3')
    Box.setAttribute('color','green')

    scene.appendChild(Box);

解决方法

我没有评论stackoverflow的声誉，并且不确定这是否是完整的答案。但是，鉴于几个月来没有人回答过这个问题，我要说的话可能是解决方案，以防其他人读到这个问题。

说运行的脚本称为script.js

<script src="script.js" defer></script>

包括延迟，以便在Aframe渲染时不会出现null异常的问题