将函数划分为单独的文件

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函数中的第 3 行所做的那样调用它的任何建议？

Answer 1

gui.js

userGUI = () => {
...
}
export const gui = new userGUI()

主.js

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