{"id":12141,"library":"three","title":"three.js","description":"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.","status":"active","version":"0.184.0","language":"javascript","source_language":"en","source_url":"https://github.com/mrdoob/three.js","tags":["javascript","three","three.js","3d","virtual-reality","augmented-reality","webgl","webgl2"],"install":[{"cmd":"npm install three","lang":"bash","label":"npm"},{"cmd":"yarn add three","lang":"bash","label":"yarn"},{"cmd":"pnpm add three","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The 'three' package is primarily ESM-only for direct import since major versions. CommonJS 'require' will not work for the modern build.","wrong":"const THREE = require('three');","symbol":"THREE (all exports)","correct":"import * as THREE from 'three';"},{"note":"Most core components are available as named exports directly from the 'three' package entry point. Avoid importing directly from 'src/'.","wrong":"import Scene from 'three/src/Scene';","symbol":"Specific components (e.g., Scene, Camera, Renderer)","correct":"import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';"},{"note":"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.","wrong":"import { OrbitControls } from 'three/src/controls/OrbitControls';","symbol":"Addon modules (e.g., OrbitControls, GLTFLoader)","correct":"import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';"}],"quickstart":{"code":"import * as THREE from 'three';\n\nconst width = window.innerWidth, height = window.innerHeight;\n\n// init\n\nconst camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );\ncamera.position.z = 1;\n\nconst scene = new THREE.Scene();\n\nconst geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );\nconst material = new THREE.MeshNormalMaterial();\n\nconst mesh = new THREE.Mesh( geometry, material );\nsce.add( mesh );\n\nconst renderer = new THREE.WebGLRenderer( { antialias: true } );\nrenderer.setSize( width, height );\nrenderer.setAnimationLoop( animate );\ndocument.body.appendChild( renderer.domElement );\n\n// animation\n\nfunction animate( time ) {\n\tmesh.rotation.x = time / 2000;\n\tmesh.rotation.y = time / 1000;\n\n\trenderer.render( scene, camera );\n}","lang":"javascript","description":"This code initializes a basic 3D scene with a rotating cube, a perspective camera, and a WebGL renderer, animating it in the browser."},"warnings":[{"fix":"Always check the official 'Migration Guide' for your target version before upgrading. Update code to use current APIs and practices.","message":"three.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.","severity":"breaking","affected_versions":">=0.175.0"},{"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.","message":"Modern 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.","severity":"breaking","affected_versions":">=0.100.0"},{"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';`.","message":"Addon 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.","severity":"gotcha","affected_versions":">=0.100.0"},{"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.","message":"The 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.","severity":"breaking","affected_versions":">=0.177.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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>`.","cause":"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.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'Scene') OR Uncaught ReferenceError: THREE is not defined"},{"fix":"Explicitly include the `.js` extension in your import statement: `import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';`","cause":"Your module bundler or environment is unable to find the `OrbitControls` module because the path is incomplete or the `.js` extension is missing.","error":"Failed to resolve module specifier 'three/examples/jsm/controls/OrbitControls'. Relative references may require a leading './', '../', or '/'"}],"ecosystem":"npm"}