[name]


While importing three.js via script tags is a great way to get up and running fast, it has a few drawbacks for longer lived projects, for example:

Using a dependency manager like npm avoids these caveats by allowing you to simply download and import your desired version of the library onto your machine.

Installation via npm

Three.js is published as an npm module, see: [link:https://www.npmjs.com/package/three npm]. This means all you need to do to include three.js into your project is run "npm install three"

Importing the module

Assuming that you're bundling your files with a tool such as [link:https://webpack.github.io/ Webpack] or [link:https://github.com/substack/node-browserify Browserify], which allow you to "require('modules')" in the browser by bundling up all of your dependencies.

You should now be able to import the module into your source files and continue to use it as per normal.

var THREE = require('three'); var scene = new THREE.Scene(); ...

You're also able to leverage [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import ES6 import syntax]:

import * as THREE from 'three'; const scene = new THREE.Scene(); ...

or if you wish to import only select parts of three.js library, for example Scene:

import { Scene } from 'three'; const scene = new Scene(); ...

Importable Examples

The core of three.js is focused on the most important components of a 3D engine. Many other components like loaders or controls are part of the examples directory. three.js ensures that these files are kept in sync with the core but users have to import them separately if they are required for their project. However, not all files are modules which makes their usage in certain cases inconvenient. In order to address this issue, we are working to provide all the examples as modules in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory. If you install three.js via npm, you can import them like so:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

The following examples files are already available as modules:

Note: When using code from the examples directory, it's important that all files match the version of your three.js main file. For example, it's not acceptable to use *GLTFLoader* and *OrbitControls* from R96 together with three.js R103. You can easily keep your files in sync by using the modules from the JSM directory. If the file is not available as a module, you can still use third-party npm packages or convert the file to a module by yourself. In both cases, ensure the code is compatible with your three.js main file.