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

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 从 LineSegments2.js 导出 THREE。要让 webpack 参与这个过程，你需要告诉它在文件上使用加载器。您可以通过 webpack 配置来完成此操作，或者像这样在代码中内联：

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

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

How do I import the Three.js Line library as an ES6 module?

three.js

ecmascript-6

es6-modules