[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: 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 Webpack or 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 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();
		...

Caveats

Currently it's not possible to import the files within the "examples/js" directory in this way. This is due to some of the files relying on global namespace pollution of THREE. For more information see Transform `examples/js` to support modules #9562.