我能够在aframe中加载.obj和.mtl文件,但是我想通过从.mtl文件中提取材料名称来更改对象的这些材质,但我如何在aframe中进行?
<a-entity id="model" position="0 0 -2">
<a-entity obj-model = "obj: #tree-obj; mtl: #tree-mtl" position="0 0 0" rotation="0 0 0" scale="0.8 0.8 0.8"></a-entity>
</a-entity>
我可以在三个js中复制相同的内容,如下所示
object.traverse( function( child ) { if ( child instanceof THREE.Mesh ) {
if (child.material.name == "xyz") { //xyz from .mtl file
child.material = Black;// black is a meshphong material
child.castShadow = true;
child.receiveShadow = true;
}
}
您可以编写一个侦听click事件的组件,并执行相同的three.js代码:
AFRAME.registerComponent('change-material-on-click', {
schema: {
target: {type: 'selector'}
},
init: function () {
var el = this.el; // Element to add click listener.
var targetEl = this.data.target; // Target to change material.
el.addEventListener('click', function () {
var mesh = targetEl.getObject3D('mesh');
mesh.traverse(...); // Do your logic here.
});
}
});
然后附上组件:
<a-image change-material-on-click="target: #model"></a-image>
<a-obj-model id="model" ...></a-obj-model>