[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:

You have to manually fetch and include a copy of the library as part of your project's source code
Updating the library's version is a manual process
When checking in a new version of the library your version control diffs are cluttered by the many lines of the build file

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 a project. You can find in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory an ES6 module version for almost all example files. If you install three.js via npm, you can import them like so:


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

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.