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

时间:2019-07-20 08:30:44

标签: aframe

我正在将gltf模型加载到框架中,并且某些对象上的某些材料需要调整。我试图通过直接访问包含gltf组件的实体的object3D属性来隔离和操纵它们。我需要访问的object3D树的一部分是.children Array。当我将该部分记录到控制台时,它是一个空数组,但是我可以在控制台中将其旋转并查看所需的对象属性。如何在脚本中访问它? .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,但是直接访问//失败。如何在脚本中访问该对象?

1 个答案:

答案 0 :(得分:0)

尝试遍历网格物体,而不是object3Ds:

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 
}