将函数拆分为单独的文件

Question

我正在使用 Three.js 构建一个允许用户调整输入的应用程序。我想将 userGUI 函数移动到一个单独的文件中，但必须在 startAnimationLoop 函数中调用它才能渲染动画。

Dat.Gui（我希望这部分放在单独的文件中）

   userGUI = () => {
   this.gui = new dat.GUI();
   var controls = function() {
   this.RotationSpeed = 0.005;
}
  this.title = new controls();
  this.gui.add(this.title, 'RotationSpeed', 0.005, 0.1);
  }

requestAnimationFrame()

  startAnimationLoop = () => {
    const tableBoard = this.scene.getObjectByName('tableSurface');
    tableBoard.rotation.y += this.title.RotationSpeed; //This is where i use the value from the GUI
    this.renderer.render(this.scene, this.camera);
    this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
  };

关于如何将 userGUI 部分移动到单独的文件中并仍然像我在 startAnimationLoop 函数的第三行中那样调用它的任何建议?

Answer 1

gui.js

userGUI = () => {
...
}

export const gui = new userGUI()

main.js

import { gui } from 'gui.js'

startAnimationLoop = () => {
...
    tableBoard.rotation.y += gui.title.RotationSpeed;
...
};