# Three.js — JavaScript 3D Library for the Web

> Three.js is the most popular 3D library for JavaScript — WebGL/WebGPU rendering made accessible. Build 3D scenes, models, shaders, physics, VR/AR, and interactive experiences without touching low-level graphics APIs.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i three
```

```ts
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
```

## Intro

Three.js is the most widely used 3D library for JavaScript, created by Ricardo Cabello (mrdoob) in 2010. It abstracts WebGL (and the new WebGPU backend) into an approachable scene graph API — Scene, Camera, Mesh, Material, Light — while still exposing low-level shader control.

- **Repo**: https://github.com/mrdoob/three.js
- **Stars**: 111K+
- **License**: MIT

## What Three.js Does

- **Scene graph** — nested objects with transforms
- **Geometries** — box, sphere, plane, custom, glTF/OBJ/FBX loaders
- **Materials & shaders** — PBR, custom GLSL
- **Lighting** — directional, point, spot, IBL
- **Post-processing** — bloom, SSAO, DOF
- **Animation** — keyframes, skeletal, morph targets
- **Physics** — via Rapier, Cannon, Ammo integrations
- **VR/AR** — WebXR module
- **WebGPU** — experimental next-gen backend

## Architecture

Single scene graph with a renderer that walks the tree each frame. Each Object3D has position/rotation/scale matrices. Materials map to shaders; geometries hold vertex data in GPU buffers. `renderer.render(scene, camera)` does the GL calls.

## Self-Hosting

Client library — ships with your app.

## Key Features

- WebGL + experimental WebGPU renderer
- 40+ geometries & materials
- glTF/OBJ/FBX/STL/PLY/DRACO loaders
- Skeletal animation
- Post-processing pipeline
- WebXR (VR/AR)
- Shadow mapping
- Ray casting for picking
- Cameras: Perspective, Orthographic, Cube

## Comparison

| Library | Focus | Bundle | React Wrapper |
|---|---|---|---|
| Three.js | General 3D | ~600KB | React Three Fiber |
| Babylon.js | Games/Enterprise | ~1MB | None |
| Pixi.js | 2D WebGL | ~200KB | @pixi/react |
| PlayCanvas | Editor-based games | ~400KB | None |

## FAQ

**Q: How do I integrate with React?**
A: Use React Three Fiber (R3F) — declarative JSX for Three.js scenes. The ecosystem also includes drei (utilities) and rapier (physics).

**Q: WebGL vs WebGPU？**
A: WebGL is the web port of OpenGL ES and is stable. WebGPU is the next-generation API (close to Metal/Vulkan); Chrome and Safari support it, and Three.js has an experimental renderer.

**Q: How do I optimize performance?**
A: Reduce draw calls (InstancedMesh), merge geometries, use KTX2/Draco compression, and disable shadows.

## Sources & Credits

- Docs: https://threejs.org/docs
- GitHub: https://github.com/mrdoob/three.js
- License: MIT

---
Source: https://tokrepo.com/en/workflows/three-js-javascript-3d-library-web-b3e54897
Author: Script Depot