我正在将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,但是直接访问//失败。如何在脚本中访问该对象?
答案 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
}