three

library0.8.0jsnpmunverified

three.js is a powerful, lightweight, cross-browser JavaScript library for creating and displaying animated 3D graphics in a web browser using WebGL, WebGPU, and other renderers. It abstracts away the complexities of low-level graphics APIs, providing a high-level scene graph, cameras, lights, materials, and geometries. The library is actively maintained with frequent minor releases (currently at 0.184.0), typically on a monthly cadence, focusing on performance, new features, and the removal of deprecated APIs. Its key differentiators include a vast ecosystem of examples, extensive documentation, and a strong community, making it a go-to choice for interactive 3D web experiences, virtual reality, and augmented reality applications.

web-framework

npm install three

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · THREE

three

web-frameworkjavascriptv0.8.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

THREE (all exports)

✓ import * as THREE from 'three';

✗ const THREE = require('three');

The 'three' package is primarily ESM-only for direct import since major versions. CommonJS 'require' will not work for the modern build.

Specific components (e.g., Scene, Camera, Renderer)

✓ import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';

✗ import Scene from 'three/src/Scene';

Most core components are available as named exports directly from the 'three' package entry point. Avoid importing directly from 'src/'.

Addon modules (e.g., OrbitControls, GLTFLoader)

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

✗ import { OrbitControls } from 'three/src/controls/OrbitControls';

Addon modules are located under 'three/examples/jsm/'. These require a module bundler (like Webpack or Rollup) to resolve the '.js' extension correctly or an environment that supports bare module specifiers and import maps.

This code initializes a basic 3D scene with a rotating cube, a perspective camera, and a WebGL renderer, animating it in the browser.

import * as THREE from 'three'; const width = window.innerWidth, height = window.innerHeight; // init const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); sce.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( width, height ); renderer.setAnimationLoop( animate ); document.body.appendChild( renderer.domElement ); // animation function animate( time ) { mesh.rotation.x = time / 2000; mesh.rotation.y = time / 1000; renderer.render( scene, camera ); }

Debug

Known issues

breakingthree.js has a rapid release cycle, typically monthly, and frequently removes deprecated APIs and legacy code. Users are strongly advised to consult the 'Migration Guide' on the GitHub Wiki for each release when upgrading.

fix

Always check the official 'Migration Guide' for your target version before upgrading. Update code to use current APIs and practices.

affects: >=0.175.0

breakingModern versions of the 'three' npm package (e.g., r100+) are published as ES Modules (ESM). Direct CommonJS 'require()' will likely fail, especially for core modules.

fix

Use ES module syntax: `import * as THREE from 'three';`. Ensure your build environment (e.g., Webpack, Rollup, Vite) is configured to handle ESM or use an older version if CommonJS is strictly required without a bundler.

affects: >=0.100.0

gotchaAddon modules (like controls, loaders, post-processing effects) are located in `three/examples/jsm/`. Importing these files often requires a module bundler to correctly resolve file paths and extensions.

fix

Configure your bundler (e.g., Webpack's `resolve.extensions`, `module.rules`) to handle `.js` extensions correctly for imported modules, or explicitly include the `.js` extension in import paths: `import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';`.

affects: >=0.100.0

breakingThe internal format version for Objects and Scenes (used in JSON serialization) may increase with new releases, potentially making scenes saved with older versions incompatible or requiring manual adjustments.

fix

Always export/import scenes with the same or newer `three.js` version. Be prepared to update saved scene files if you downgrade or if the format changes significantly between major upgrades.

affects: >=0.177.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'Scene') OR Uncaught ReferenceError: THREE is not defined

Attempting to use `THREE` global or properties of `THREE` when the library hasn't been properly loaded as an ES module or via a script tag, often due to using `require()` or incorrect script order.

fix

Ensure you are using `import * as THREE from 'three';` for modern ES module environments or that the `three.js` script is loaded *before* your application script in a browser environment using `<script src="three.min.js"></script>`.

Failed to resolve module specifier 'three/examples/jsm/controls/OrbitControls'. Relative references may require a leading './', '../', or '/'

Your module bundler or environment is unable to find the `OrbitControls` module because the path is incomplete or the `.js` extension is missing.

fix

Explicitly include the `.js` extension in your import statement: `import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';`

Upgrade

Version history

0.8.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/mrdoob/three.js ↗

packagehttps://www.npmjs.com/package/three ↗

homepagehttps://threejs.org ↗