aframe - Aframe 纹理更改

Question

我正在编写以下脚本。更改 .glb 模型的图像。它只产生白色。没有发生适当的纹理变化。请帮我。

    const nextButtonComponent = () => ({          
  init: function() {
    const model = document.getElementById('model')
    const nextButton = document.getElementById('nextbutton')
    const loader = new THREE.TextureLoader();

    var material = new THREE.MeshStandardMaterial({
      side: THREE.DoubleSide,
      flatShading: true,
    });
    const mesh = model.getObject3D('mesh');

    nextButton.style.display = 'block';

    const nextAnimation = () => {
      loader.load( './assets/img/1.jpg' ,
            function(texture){
            material.map = texture;
            material.needsUpdate = true;

            if(mesh){
                mesh.traverse((node) => {
                  if (node.isMesh) {
                    node.material = material;
                    node.material.map = texture;
                    node.material.needsUpdate = true;
                  }
                });
              }
            });
    }
    nextButton.onclick = nextAnimation // Switch to the next animation when the button is pressed.
  }
})
export {nextButtonComponent}

标签： aframe8thwall-xr

Answer 1

我有另一个解决方案。这对我有用。

我正在使用THREE.ImageUtils.loadTexture(src)

export const textureSwapComponent = {
    init: function() {
      const nextButton = document.getElementById('nextbutton');
      nextButton.style.display = 'block';    

      let src1 = document.getElementById('imageFile1').src;
      let src2 = document.getElementById('imageFile2').src;   
      let src3 = document.getElementById('imageFile3').src; 

     // this.ImageUtils = THREE.ImageUtils();



      this.text = document.getElementById('textDebug')
      const model = document.getElementById('model')
      this.mesh = model.getObject3D('mesh');

      this.material = new THREE.MeshStandardMaterial({
     // map : ImageUtils.loadTexture(src1),
      side: THREE.DoubleSide,
      flatShading: true,
      });

      model.addEventListener('model-loaded', (e) => {
        this.mesh = model.getObject3D('mesh');
        if(this.mesh){
        this.debugDisplay('Mesh Ok');
        nextAnimation();
        }else{
        this.debugDisplay('Mesh Not Ok');
        }
      })
      let idx = 0;

      const nextAnimation = () => {
        this.debugDisplay('On Click');
        var src = src1;
        if(idx >=3){
          idx = 0;
        }
        switch(idx){
          case 0:
          src = src1;
          break;
          case 1:
          src = src2;
          break;
          case 2:
          src = src3;
          break;
        }
        this.texture = THREE.ImageUtils.loadTexture(src);
        idx ++;
        if(this.mesh){
                this.debugDisplay('Mesh Ok');
                this.mesh.traverse((node) => {
                  if (node.isMesh) {
                    if(node.material !== this.material){
                    node.material = this.material;
                    }
                    node.material.map = this.texture;
                    node.material.needsUpdate = true;
                  }
                });
              }else{
                this.debugDisplay('Mesh Not Ok');
              }
      }
      nextButton.onclick = nextAnimation


  },  
  debugDisplay : function(val){
    this.text.setAttribute('value', val);
  }

}