Question

我正在建立Three.js项目，并且在如何将两个函数划分为单独文件的过程中苦苦挣扎

我有我的 Main.js （反应类别组件）文件，其中包含200行代码，而我想分开的其中两个函数是：

startAnimationLoop（）

  startAnimationLoop = () => {
    const tableBoard = this.scene.getObjectByName('tableSurface');
    tableBoard.rotation.y += this.title.RotationSpeed;

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

userGUI（）（“ dat.gui”控制器）

  userGUI = () => {
    const getTableSurface = this.scene.getObjectByName('tableSurface');

    this.gui = new dat.GUI();
    const controls = function() {
    this.RotationSpeed = 0.00;
  }
    this.title = new controls();
    this.gui.add(this.title, 'RotationSpeed', 0.0, 0.025);
  }

我在 componentDidMount（）

中调用这些函数

componentDidMount() {
    this.sceneSetup();
    addLights({ scene: this.scene });
    addFloor({ scene: this.scene })
    this.userGUI();
    this.startAnimationLoop();
    window.addEventListener("resize", this.handleWindowResize);
  }

我已经为此苦苦挣扎了很长时间，对于我如何进行此过程的任何建议将不胜感激。

Answer 1

就我个人而言，我不会对其进行详细介绍，但是如果您也愿意，则需要导出和导入方法。您还需要确保在System.getenv( )的适当范围内调用它。

因此，使文件导出功能

this

还有你的反应成分

export const startAnimationLoop = () => {
  /* The Code
}

以及调用它时

import { startAnimationLoop } from './path/startAnimationLoop'

或者您可以使用bind在构造函数中进行设置，并在componentDidMount内部使用startAnimationLoop.call(this)

this.startAnimationLoop()

如何将代码分成单独的文件？

1 个答案: