我可以将 THREE.js 材料放在 gltf 模型上吗？

Question

我目前正在处理我的 A-frame 投资组合。我正在尝试将对象的材质更改为线框材质，我正在使用 THREE.js 的线框材质（MeshBasicMaterial）来做到这一点。如果我将此材料放在“a-box”或“a-sphere”之类的对象上，它会起作用，但我需要将此线框材料放在我的 3D gltf 模型上。这可能吗？

这是我调用材料的脚本：

AFRAME.registerComponent('wireframe', {
             dependencies: ['material'],
             init: function () {
             this.el.components.material.material.wireframe = true;
                }
            });

<a-box position="-1 0.5 -3" rotation="0 45 0" material="color: blue" wireframe></a-box>

Answer 1

可以在 gltf 上修改材质。 一种方法是深入到 gltf 内网格的 THREEjs 级别，并创建一个新材质并为其分配一个线框属性。

 AFRAME.registerComponent('tree-manager', {         
          init: function () {
            let el = this.el;
            let comp = this;
            let data = this.data;
            comp.scene = el.sceneEl.object3D;  
            comp.counter = 0;   
            comp.treeModels = [];
            comp.modelLoaded = false;

            // After gltf model has loaded, modify it materials.
            el.addEventListener('model-loaded', function(ev){
              let mesh = el.getObject3D('mesh'); 
              if (!mesh){return;}
              //console.log(mesh);
              mesh.traverse(function(node){
                 if (node.isMesh){  
                   let mat = new THREE.MeshStandardMaterial;
                   let color = new THREE.Color(0xaa5511);
                   mat.color = color;
                   mat.wireframe = true;
                   node.material = mat;                  
                 }
              });
              comp.modelLoaded = true;
            });   
          }
        });

<a-entity id="tree" gltf-model="#tree-gltf" scale="5 5 5"  tree-manager></a-entity>

Here is a glitch 显示如何。