🎨
UI Component3M+/wkMIT

three

Three.js is the most popular JavaScript library for creating and displaying 3D graphics in web browsers using WebGL, WebGPU, and CSS3D renderers. The library pr

Installation

npm
npm install three
yarn
yarn add three
pnpm
pnpm add three

Import

ESM
import * as THREE from 'three';

Quick Example

usage
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x3b82f6 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;
renderer.render(scene, camera);

About three

Three.js is the most popular JavaScript library for creating and displaying 3D graphics in web browsers using WebGL, WebGPU, and CSS3D renderers. The library provides a comprehensive abstraction over the WebGL API, making 3D programming accessible without deep graphics programming knowledge. Three.js includes geometries (box, sphere, plane, torus, custom), materials (basic, standard, physical, shader), lights (ambient, directional, point, spot, hemisphere), cameras (perspective, orthographic), and a scene graph for organizing 3D objects hierarchically. The library supports texture mapping, normal maps, environment maps, shadows, fog, post-processing effects (bloom, depth of field, SSAO), skeletal animation, morph targets, particle systems, and physics integration. Three.js can load 3D models in GLTF, OBJ, FBX, and other formats through its loader system. React Three Fiber (@react-three/fiber) provides a React renderer for Three.js, enabling declarative 3D scene construction with React components. Three.js powers interactive product configurators, data visualizations, architectural walkthroughs, games, art installations, and immersive web experiences. The library is the foundation of the WebGL ecosystem and is used on millions of websites.

Quick Facts

Packagethree
CategoryUI Component
Weekly Downloads3M+
LicenseMIT
Installnpm install three

Related Packages

Browse npm Packages by Category

Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.