Изменение текстуры афрамы - PullRequest
Новая
       37

Изменение текстуры афрамы

0 голосов
/ 28 мая 2020

Я работаю над следующим сценарием. Чтобы изменить изображение модели .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}

Ответы [ 2 ]

0 голосов
/ 03 июня 2020

У меня есть другое решение. Это работает для меня.

Я использую THREE.ImageUtils.loadTexture (sr c) 

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);
  }

}
0 голосов
/ 28 мая 2020

Вот часть руководства о том, как создать minecraft в кадре:

Мы помещаем в наши, размещаем активы (например, изображения, видео, модели, звуки) и укажите на них из наших объектов с помощью селектора (например, #myTexture).

Давайте переместим нашу текстуру земли для предварительной загрузки с помощью элемента: 

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

<a-scene>
  <a-assets>
    <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
  </a-assets>

  <a-cylinder id="ground" src="#groundTexture" radius="32" height="0.1"></a-cylinder>
</a-scene>
...