three

library0.184.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

github ↗package ↗homepage ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

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

import * as THREE from 'three';

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

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

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.

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

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 footguns

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.

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.

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.

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.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

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

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

homepagehttps://threejs.org ↗