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

Question

I do my development using modern JS (ES6) which means modules.

Although Three.js is available as an ES6 module. The line library - LineSegmentsGeometry, LineGeometry, LineSegments2, etc. - is not.

What are my options here?

Answer 1

You have a couple options.

First and foremost, edit the code.

You're welcome to modify the code, and so you could manually turn it into an ES6 module. You would want to remove any references of THREE, and export anything that was normally attached to that object. You'll also need to import any required core THREE.js components, like Mesh, Vector3, etc.

The way I prefer to do this is to copy the file I'm updating locally, and change references to it. For example:

// 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...

Your other option is to use a bundler with an export loader.

Webpack (and other bundlers, I'm just more familiar with Webpack) provides a exports-loader which can be used against specific files that don't export anything. For example, you can tell the exports-loader to export THREE from LineSegments2.js. To get webpack involved in this process, you need to tell it to use the loader on the file. You can do this through the webpack configuration, or inline in the code like this:

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