Scripts2026年4月11日·1 分钟阅读

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
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

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();
介绍

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

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

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
◈首页🔍搜索👤我的