Могу ли я поместить материал THREE.js в модель GLTF? - PullRequest
Новая
       53

Могу ли я поместить материал THREE.js в модель GLTF?

1 голос
/ 22 сентября 2019

Я сейчас работаю над своим портфолио в A-frame.Я пытаюсь изменить материал объектов на каркасный материал, для этого я использую каркасный материал (MeshBasicMaterial) из THREE.js.Если я помещу этот материал на объекты типа «a-box» или «a -phere», это сработает, но мне нужно поместить этот каркасный материал в мою 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>

1 Ответ

0 голосов
/ 22 сентября 2019

Возможно изменить материал на GLTF.Один из способов сделать это - углубиться в уровень THREEjs меша внутри gltf, создать новый материал и присвоить ему свойство каркаса.

 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>

Вот глюк , который показывает, как.

...