Three.js — JavaScript 3D Library for the Web

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

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