# 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 as a script file and run:

## 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: 和 React 怎么集成？**
A: 用 React Three Fiber（R3F）——声明式 JSX 写 Three.js 场景。生态还有 drei（工具库）、rapier（物理）。

**Q: WebGL vs WebGPU？**
A: WebGL 是 OpenGL ES 的 Web 移植，已稳定。WebGPU 是新一代 API（接近 Metal/Vulkan），Chrome/Safari 已支持，Three.js 有实验渲染器。

**Q: 性能优化？**
A: 减少 draw calls（InstancedMesh）、合并几何体、使用 KTX2/Draco 压缩、禁用阴影。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/b3e54897-3588-11f1-9bc6-00163e2b0d79
Author: Script Depot