Problems with changing color of gltf object

 ̄綄美尐妖づ 提交于 2021-02-08 23:43:23

问题


With this answer as a reference, I have succeeded in changing the color of the gltf model. (Change the color of an object (.dae or gltf) in "AR.JS") However, the model texture will disappear. why?

<!-- A FRAME -->
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent('carman', {
      init: function(){
          let el = this.el;
          let self = this;
          self.cars = [];
          el.addEventListener("model-loaded", e => {
              let car3D = el.getObject3D('mesh');
              if (!car3D){return;}    
             //console.log('car', car3D);
              car3D.traverse(function(node){
                  if (node.isMesh){
                      // console.log(node);
                      self.cars.push(node);
                      if(node.name == "meta02t"){
                          self.carMat = node.material;
                      }
                      node.material.map = null;
                  }
             });
         });
         el.addEventListener('changecolor', e => {
           let colorp = e.detail.color;
           let colorHex = Number(colorp.replace('#', '0x'));
           let color3D = new THREE.Color(colorHex);
           self.carMat.color = color3D;
         });
     }
});
AFRAME.registerComponent('click-listener', {
   init: function () {
       // Listen for click event
       let self = this;
       let el = this.el;
       this.el.addEventListener('click', function (evt) {
         // Call the Octahedron and trigger it's scalewave animation
         let car = document.querySelector('#car');
         let color = el.getAttribute('material', 'color');
        car.emit('changecolor', color);
       });
   }
});
</script>

My Glitch Project https://glitch.com/~0421


回答1:


There is no texture, because once the model is loaded, you go through the nodes and remove it:

node.material.map = null; // removes the texture

Furthermore - the car seems black even with the color changed. The "metal" parts are rough and not metallic (roughness: 0.5, metalness: 0). If you change that, the car will change its color (visually speaking):

el.addEventListener('changecolor', e =>{             
   // set the new color
   let colorp = e.detail.color;
   let colorHex = Number(colorp.replace('#', '0x'));
   let color3D = new THREE.Color(colorHex);
   // apply for the "metal" materials 
   for (var i = 0; i < self.cars.length; i++) {
      if (!self.cars[i].material) return
      if (self.cars[i].name.includes("meta")) {
        self.cars[i].material.metalness = 0.7
        self.cars[i].material.roughness = 0.2
        self.cars[i].material.color = color3D;
      }
   }
});

Check it out in this glitch.



来源:https://stackoverflow.com/questions/61358144/problems-with-changing-color-of-gltf-object

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!