如何在AFrame中访问gltf-model object3D.children.material的内部

Question

我正在将 gltf 模型加载到框架中，并且某些对象上的某些材质需要调整。我试图通过直接访问包含 gltf 组件的实体的 object3D 属性来隔离和操作它们。我需要访问的 object3D 树的部分是 .children 数组。当我将该部分记录到控制台时，它是一个空数组，但我可以在控制台中旋转它并查看我需要的对象属性。如何在我的脚本中访问它？ .children 属性返回一个空数组。

你可以在这里看到我的项目： http://www.sensorium.love/experiments/yamashiro/walkthroughlit2/bonsaiLightsTest.html 带有耀斑纹理的黑色小矩形是来自 gltf 的众多平面之一。背景中的大光晕是我用我想要的材料在框架中制作的图元。我试图将它分配给我的 gltf 中的另一个平面对象，但它没有渲染。它应该适用于孩子。 如果您检查控制台，您可以看到我在哪里记录了这个子数组。它是一个空数组，但是如果您向下旋转它旁边的箭头，您可以看到我正在尝试访问的基础数据。但我不明白如何在我的脚本中访问它。

AFRAME.registerComponent('flareplanes',{
            init:function(){
                let l1 = document.querySelector('#lta1');
                let lm3D1 = l1.object3D;
                console.log(lm3D1);
                let lmc = lm3D1.children;
                console.log(lmc);               
                for(let propName in lmc){
                    console.log(lmc[propName]);
                }
            }
        }); 

<a-scene>
<a-assets>
   <a-asset-item id="bonsailights" src="BonsaiLights.glb" ></a-asset-item>
   <img id="flare" src="assets/ledFlare.png"></a-asset-item>
</a-assets>             

<a-entity id="lta1" gltf-part="src: #bonsailights; 
   part:BonsaiBendDLeafLiteL_01"></a-entity> 
<a-entity id="lta2" gltf-part="src: #bonsailights; part:BonsaiBendDLeafLiteL_02" material="src: #flare; shader: flat; opacity: 0.99; blending: additive"></a-entity>

<a-entity id="plane" geometry="primitive: plane" position="1.0 1.6 2" rotation="0 180 0" material="src: #flare; shader: flat; opacity: 0.99; blending: additive" flareplanes></a-entity> 

</a-scene>


let lmc = lm3D1.children;
console.log(lmc); // Array empty
console.log(lmc[0]); //undefined

// 然而，在控制台中，旋转箭头会显示我需要 // 访问的对象。看起来这个对象是数组中的第 0 项，但访问 // 直接失败。如何在我的脚本中访问此对象？

Answer 1

尝试遍历网格子对象，而不是 object3D：

var mesh = el.getObject3D('mesh');
mesh.traverse(node => {
  if (node.isMesh) {
      console.log(node.material) 
  }
}); 

Here's 一个小故障，我在其中访问子材质以操纵不透明度。

---

如果el.getObject3D('mesh') 为空，请尝试等待model-loaded 事件：

handleModel: function() {
   let mesh = this.el.getObject3D('mesh')
   if (!mesh) {
       this.el.addEventListener('model-loaded', this.handleModel.bind(this)
       return
   }
   // the model should be loaded by this point 
}