ScriptsApr 11, 2026·1 min read

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.

SC
Script Depot · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i three
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.

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

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Phaser — Fast & Fun HTML5 Game Framework

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers. Canvas and WebGL rendering, physics systems (Arcade, Matter.js), sprite atlases, tilemaps, and animation built in.

Script Depot

Apache ECharts — Powerful Interactive Charting Library

Apache ECharts is a powerful, interactive charting and data visualization library for browsers. 40+ chart types, canvas/SVG rendering, streaming data, and GPU acceleration. The enterprise choice used by Alibaba, Baidu, and countless dashboards.

Script Depot

Auth.js (NextAuth) — Authentication for the Web

Auth.js (formerly NextAuth.js) is a complete open-source authentication solution for Next.js, SvelteKit, Remix, Express, and more. 80+ OAuth providers, passwordless, magic links, database or JWT sessions, and first-class TypeScript.

Script Depot
◈Home🔍Search👤Me