使用 ThreeJS 和 Dat.Gui 更新网格纹理

Question

我希望在单击功能时更新我的网格的纹理。

当您单击 'UpdateMateria' 功能时，我希望网格处理其当前纹理并添加一个新纹理。

动画循环

  startAnimationLoop = () => {
   const tableBoard = this.scene.getObjectByName('tableSurface');
   tableBoard.material.map = this.updateMateria;

   this.renderer.render(this.scene, this.camera);
   this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
  };

Dat.Gui

  userGUI = () => {

    const update = {
      updateMateria: function() {
        alert('Changing');
        this.material.dispose();
        this.material.map = texture1();
      }
    }

    this.gui = new dat.GUI();
    const controls = function() {
    this.title = new controls();
    this.gui.add(update, 'updateMateria')
  }
}

当我将函数直接放入 'Animation Loop' 时，这实际上将纹理更新为所需的纹理，但当前版本给我“TypeError: Cannot read 属性 'dispose' of未定义'

Answer 1

首先，不能在updateMateria中使用this引用（可能是updateMaterial？？？）。考虑在此函数外部的变量中保护 this 引用，并改用此变量。此外，如果你只是想改变纹理，没有必要处理material。

userGUI = () => {

    const scope = this;

    const update = {
        updateMateria: function() {
            alert('Changing');
            // scope.material.dispose();
            scope.material.map = texture1();
        }
    }

    this.gui = new dat.GUI();
    const controls = function() {
    this.title = new controls();
    this.gui.add(update, 'updateMateria')

}

three.js R108

使用 ThreeJS 和 Dat.Gui 更新网格纹理

Update texture of mesh using ThreeJS & Dat.Gui

reactjs

three.js

dat.gui