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

【问题标题】：Update texture of mesh using ThreeJS & Dat.Gui使用 ThreeJS 和 Dat.Gui 更新网格的纹理
【发布时间】：2020-01-18 03:05:42
【问题描述】：

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

当您单击“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')
  }
}

当我将函数直接放入“动画循环”时，这实际上会将纹理更新为所需的纹理，但当前版本给出了“TypeError：无法读取未定义的属性“处置””

【问题讨论】：

标签： reactjs three.js dat.gui

【解决方案1】：

首先，您不能在updateMateria 中使用this 引用（可能是updateMaterial???）。考虑在此函数外部的变量中保护this 引用并改用此变量。此外，如果你只是想改变纹理，也不需要处理材料。

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

【讨论】：