从子中获得价值

Question

我正在使用 Three.js 和 Dat.gui 库，并希望从 startAnimationLoop()

中的 GUIController 获取值>

GUI控制器

import * as dat from 'dat.gui';

export default ({ gui, title }) => {
     var gui = new dat.GUI();
     var controls = function() {
     this.RotationSpeed = 0.005;
    }

     var title = new controls();
     gui.add(title, 'RotationSpeed', 0.005, 0.1);
}

在我的 Main.js 文件中导入和初始化导入。 视觉效果按应有的方式显示。

import GUIController from './GUIController'

  componentDidMount() {
    this.sceneSetup();
    addMesh2({ scene: this.scene, cube: this.tableBoard });
    addLights({ scene: this.scene });
    GUIController({gui: this.gui, title: this.title})
    this.startAnimationLoop();
    window.addEventListener("resize", this.handleWindowResize);
  }

startAnimationLoop 处理所有动画的函数（在 Main.js 中）。我希望这些值来自 GUIController.title.RotationSpeed。

  startAnimationLoop = () => {
    const tableBoard = this.scene.getObjectByName('tableSurface');
    tableBoard.rotation.y += 0.005; //THIS WORKS
    tableBoard.rotation.y += this.GUIController.title.RotationSpeed; //DOES NOT WORK
    this.renderer.render(this.scene, this.camera);
    this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
  };

我认为问题在于只有视觉部分适用，但从未发送过值。

GUIController.JS 中的Console.log

console.log(title.RotationSpeed) //outputs: 0.005 (the wanted value)

Main.JS 中的Console.log

console.log(this.GUIController.title.RotationSpeed) //outputs: undefined

但是当我在控制台记录导入时，它会显示以下内容：

console.log(this.GUIController)

我如何从 Main.js 获得 GUIController.js 中的值？

Answer 1

GUI控制器

import * as dat from 'dat.gui';

export default ({ gui, title }) => {
     var gui = new dat.GUI();
     var controls = function() {
     this.RotationSpeed = 0.005;
    }

     var title = new controls();
     gui.add(title, 'RotationSpeed', 0.005, 0.1);
}

这里你传递了一个标题实例作为参数，但是你声明了另一个并替换它，这可能是原因吗？