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

Question

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

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

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

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

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 
}

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

How to access the interior of gltf-model object3D.children.material in AFrame

aframe