动态创建的 A-FRAME 内容设置为嵌入将不会显示 A-FRAME 检查器

Question

我正在使用一个函数动态创建 A-FRAME 场景，该函数将图像路径作为参数并返回构建的 A-FRAME a-scene。

虽然尝试使用 ctrl + alt + i 初始化 A-FRAME 检查器不起作用，但返回的值正在工作并在 DOM 中正确显示，这主要是由于动态附加的内容。

A-FRAME 中是否有允许检查员处理动态附加内容或其他此类解决方法的标志或设置？

     function buildCelestialBody(a) {
    let aframe= `
                <!-- AFRAME CONTENT -->
                <!-- MAIN SCENE -->
                <a-scene embedded
                        loading-screen="dotsColor: #ffffff;  backgroundColor: black;"
                        vr-mode-ui="enabled: false fuseTimeout: 0">

                    <!-- ASSETS -->
                    <a-assets>
                        <img id="celestialbody" src="${a}"></img>
                    </a-assets>

                    <!-- CAMERA -->
                    <a-entity id='cameraWrapper' position="0 0 0" rotation="0 0 0">
                        <a-camera id="camera1" camera="active: true; zoom: 3.5;
                        spectator: false;"
                        look-controls="enabled:  false"></a-camera>
                    </a-entity>

                    <!-- CELESTIAL BODY -->
                    <a-sphere src="#celestialbody"
                    geometry="primitive: sphere;
                              segmentsHeight: 100;
                              segmentsWidth: 100"
                    scale="1 1 1"
                    position="0 0 -8.5;"
                    animation="property: rotation;
                                dur: 200000;
                                from: 400 360 0;
                                to: 400 -360 0;
                                dir: reverse;
                                loop: true;
                                easing: linear"
                    id="celestialbody" celestialbody>
                    </a-sphere>

                    <!-- LIGHT -->
                    <a-entity id="light"
                              light="type:directional; castShadow:true;"
                              position="2 1 1"
                              animation="property: position;
                                        dur: 2000;
                                        from: 2 1 1;
                                        to: -2 1 1;
                                        dir: reverse;
                                        loop: true;
                                        autoplay: false;
                                        easing: easeInQuad;">
                    </a-entity>

                </a-entity>

                <!-- LIGHT SOURCES -->
                <a-light id="light_1" type="ambient" color="#9ecdf9" intensity="0.460" position="2 4 4"></a-light>

                </a-scene>

                <!-- AFRAME CONTENT END -->`
        return aframe;

    } 

Answer 1

您需要将创建代码放在一个组件中，而不仅仅是一个全局范围的函数。将其放置在组件中可确保首先加载所有内容（包括检查器），然后运行您的代码，并且检查器将注册对象。

        AFRAME.registerComponent('treeman', {
            init: function(){
                let el = this.el;
                let sceneEl = document.querySelector('a-scene');
                let trees = sceneEl.querySelector('#trees');
                el.addEventListener("model-loaded", e =>{
                    //trees.emit('modelisloaded');
                    let tree3D = el.getObject3D('mesh');
                    if (!tree3D){return;}                   
                    tree3D.traverse(function(node){
                        if (node.isMesh){                           
                            node.renderOrder = 2;
                            console.log(node.name, node.renderOrder, node.material);
                            node.material.color=new THREE.Color(0xaa5522);
                            node.material.map = null;
                        }
                    });

                    let countX = 10;
                    let cubes = [];
                    let size = 0.125, spacing = 0.05, x;
                    for (let i=0; i<countX; i++){
                      cubes[i] = document.createElement('a-entity'); // create the element
                       // create components, id, geometry, position
                      cubes[i].setAttribute('id', 'tree_'+i.toString());
                      cubes[i].setAttribute('gltf-model', '#tree');
                      x = (size + spacing) * countX * (-0.5) + i * (size + spacing) ;
                      y = Math.random() * 0.25;
                      z = Math.random() * 1;
                      cubes[i].setAttribute('position', x.toString()+ ' '+y.toString()+' '+z.toString() );


                      // you can add event listeners here for interaction, such as mouse events.
                      sceneEl.appendChild(cubes[i]);// Append the element to the scene, so it becomes part of the DOM.
                    }           
              });
            }
        });


       <a-entity id="treemodel" visible="false" gltf-model="#tree" scale="5 5 5" treeman></a-entity>

我刚刚运行了这个，确认动态创建的对象确实出现在检查器中。

glitch here