Question

我使用意味着模块的现代JS（ES6）进行开发。

虽然three.js所可作为ES6模块。行库-LineSegmentsGeometry，LineGeometry，LineSegments2等-不是。

我在这里有什么选择？

Answer 1

您有两种选择。

首先，编辑代码。

欢迎您修改代码，因此可以手动将其转换为ES6模块。您可能希望删除任何对THREE的引用，并导出通常附加到该对象的任何内容。您还需要导入所有必需的THREE.js核心组件，例如Mesh，Vector3等。

我更喜欢这样做的方式是复制要在本地更新的文件，然后更改对该文件的引用。例如：

// local_three_modules/LineSegments2.js
import { Mesh, Vector3, etc. } from "three"

let LineSegments2 = function ( geometry, material ) {
    // ...
}

export default LineSegments2

// app.js
import { Mesh, Vector3, etc. } from "three"
import LineSegments2 from "./local_three_overrides/LineSegments2.js"

// and so on...

您的另一个选择是将捆绑器与导出加载器一起使用。

Webpack（以及其他一些打包器，我对Webpack更加熟悉）提供了exports-loader，可用于不导出任何内容的特定文件。例如，您可以告诉exports-loader从THREE导出LineSegments2.js。要使Webpack参与此过程，您需要告诉它使用文件上的加载器。您可以通过webpack配置执行此操作，也可以在代码中内联如下代码：

import THREE from "exports-loader?THREE!./node_modules/three/examples/js/lines/LineSegments2.js"

如何将Three.js Line库导入为ES6模块？

1 个答案: