我可以在 gltf 模型上放置 THREE.js material 吗？

Question

我目前正在使用 A 型框架制作我的作品集。我正在尝试将对象的 material 更改为线框 material，我正在使用 THREE.js 的线框 material (MeshBasicMaterial) 来执行此操作。如果我将此 material 放在 "a-box" 或 "a-sphere" 之类的对象上，它会起作用，但我需要将此线框 material 放在我的 3D gltf 模型上。这可能吗？

这是我调用 material:

的脚本

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 上的 material。一种方法是深入 gltf 内部网格的三个 js 层，创建一个新的 material 并为其分配一个线框属性.

 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 这说明了如何。

我可以在 gltf 模型上放置 THREE.js material 吗？

Can I put a THREE.js material on a gltf model?

3d

three.js

aframe

gltf