Динамически создаваемый контент A-FRAME с установленным внедренным не будет отображать инспектор A-FRAME - PullRequest
Новая
       8

Динамически создаваемый контент A-FRAME с установленным внедренным не будет отображать инспектор A-FRAME

0 голосов
/ 24 сентября 2019

Я создаю сцены A-FRAME динамически с помощью функции, которая принимает путь изображения в качестве аргумента и возвращает встроенную a-сцену A-FRAME.

Возвращенное значение работает и отображается правильно вDOM, хотя попытка инициализировать инспектор A-FRAME с помощью ctrl + alt + i, не работает, в основном из-за динамически добавляемого содержимого.

Есть ли в 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;

    }

1 Ответ

0 голосов
/ 24 сентября 2019

Вы должны поместить свой код создания в компонент, а не просто в глобально ограниченную функцию.Помещение его в компонент гарантирует, что сначала загружается все (включая инспектор), затем выполняется ваш код, и объекты будут зарегистрированы инспектором. 


        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>

Я только что запустил это, подтвердив, что динамическисозданные объекты отображаются в инспекторе.

сбой здесь

...