开发工具精选项目

Three.js

面向 Web 的 JavaScript 3D 图形库，以场景图、相机、材质和渲染器简化 WebGL 与 WebGPU 开发。

GitHub 访问官网

主要语言JavaScript

开源许可MIT

项目类型开发工具

维护状态活跃维护

OVERVIEW

项目概述

Three.js 在浏览器底层图形 API 之上提供场景、网格、光照、阴影、动画、模型加载、后处理和 WebXR 等能力。核心包配有大量按需 Addons、示例和编辑器，并正在通过 WebGPURenderer 与 TSL 构建下一代渲染体系。

Three.js 是一个用于在网页中创建实时 2D/3D 图形的 JavaScript 库。它不会取代 WebGL 或 WebGPU，而是在底层 API 之上提供 Scene、Camera、Object3D、Geometry、Material、Texture、Light、AnimationMixer、Raycaster 和 Renderer 等高层对象，让开发者不用从 Shader、Buffer 和矩阵运算开始搭建每个场景。核心包之外，`three/addons/` 提供 OrbitControls、GLTFLoader、后处理、导出器、WebXR Helper 等可选模块。当前 npm 稳定版为 0.185.1，对应 r185。WebGLRenderer 仍是纯 WebGL 2 应用的推荐方案；WebGPURenderer 可优先使用 WebGPU 并回退至 WebGL 2，带来 TSL、节点材质和新后处理体系，但官方仍将其标记为实验状态。

稳定版本0.185.1 / r185

渲染后端WebGL 2 / WebGPU（含 WebGL 2 回退）

许可证MIT

FEATURES

主要特点

Three.js 从场景组织、资源加载到实时渲染提供完整基础设施，同时保留自定义 Shader 和底层图形能力的出口。

场景图与对象层级

通过 Scene 和 Object3D 组织 Mesh、Group、Camera、Light 与嵌套变换，统一管理位置、旋转、缩放和可见性。

相机与数学工具

内置透视、正交、立体相机，以及 Vector、Matrix、Quaternion、Box、Ray、Frustum 等实时图形数学类型。

Geometry 与 Material

提供常见几何体、BufferGeometry、PBR 材质、基础材质、点线渲染和自定义 Shader 能力。

WebGLRenderer

成熟的 WebGL 2 渲染路径支持灯光、阴影、纹理、Render Target、Instancing、Clipping 和自定义 Shader。

WebGPURenderer

下一代通用 Renderer 优先使用 WebGPU，并可自动回退 WebGL 2；目前仍属实验能力，需逐项目验证兼容性。

TSL 与节点材质

Three.js Shading Language 用 JavaScript 表达 Shader 节点，可按后端生成 WGSL 或 GLSL，并驱动新后处理体系。

模型与资源加载

Addons 提供 glTF/GLB、FBX、OBJ、USDZ、KTX2、EXR 等 Loader；官方优先推荐面向运行时传输的 glTF。

动画系统

AnimationMixer、Clip、Track 和 Action 支持骨骼、Morph Target、关键帧混合、循环与时间缩放。

交互与控制器

Raycaster 可做拾取和命中测试，OrbitControls、TransformControls、PointerLockControls 等 Addons 处理常见操作。

光照、阴影与环境

提供多种 Light、Shadow、Fog、Environment Map、PMREM 与 PBR 工作流，支持 HDR 环境照明。

后处理

WebGL 路径可用 EffectComposer；WebGPU 路径拥有基于节点、支持 MRT 和 Pass 合并的新后处理栈。

WebXR

集成浏览器 WebXR Session，并提供 VRButton、ARButton、Controller Model 等 Helper 构建沉浸式体验。

按需 Addons

控制器、Loader、Exporter、后处理和 Helper 不强塞入核心入口，可通过明确子路径按需导入。

丰富示例与 Editor

官方示例覆盖 WebGL、WebGPU、Shader、Loader、物理和 XR，在线 Editor 可用于快速搭建与导出场景。

USE CASES

适用场景

它适合需要把交互式 3D、可视化、产品展示或 XR 体验直接交付到浏览器的项目。

产品 3D 展示与配置器

加载 glTF 产品模型，组合材质、颜色、部件切换、相机热点和 AR 预览，构建电商或工业配置体验。

数据与科学可视化

使用 InstancedMesh、Points、Line 和自定义 Shader 呈现空间数据、网络、地理、医学或仿真结果。

创意网站与品牌体验

将实时 3D、滚动、指针和声音结合，制作活动页、数字展览、作品集与互动叙事。

浏览器游戏与原型

搭建场景、动画、输入、粒子和音频，再根据需要接入 Rapier 等物理库与自己的游戏循环。

建筑与数字孪生

显示大型场景、设备状态、空间标注和测量工具，但需专门设计模型分层、LOD、流式加载与拾取。

WebXR 体验

通过 WebXR 在兼容设备中构建 VR 展厅、AR 放置、培训和空间交互应用。

教育与图形实验

用可交互场景解释几何、光照、物理、天文和 Shader 概念，比直接操作底层 WebGL 更容易迭代。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

Three.js 擅长的地方

显著减少直接使用 WebGL/WebGPU 所需的 Buffer、Shader、矩阵和资源管理样板。
场景图、PBR 材质、动画、Loader、控制器、后处理与 XR 覆盖常见 Web 3D 基础能力。
可从简单立方体逐步扩展到自定义 Shader、Render Target 和复杂渲染管线。
glTF 工作流成熟，能与 Blender 等常见内容制作工具协作。
WebGLRenderer 成熟稳定，同时提供通往 WebGPU、TSL 和节点材质的迁移路径。
庞大的官方示例、社区教程和第三方生态有助于验证实现方式。
ES Module 与 Addons 子路径便于现代构建工具按需打包。
不绑定 React、Vue 或其他 UI 框架，可在原生 Web 或任意框架中使用。
MIT 许可宽松，适合商业产品、内部工具和开源项目。

需要注意

采用前应考虑的问题

需要掌握实时 3D 基础

Three.js 简化 API，但相机、坐标系、光照、PBR、贴图、Shader、Draw Call 和 GPU 成本仍需理解。

WebGPURenderer 仍是实验状态

官方明确提示可能缺少能力或在部分场景慢于 WebGLRenderer，生产采用前必须测试目标浏览器、设备和 Scene。

两套 Renderer 不是无成本切换

ShaderMaterial、RawShaderMaterial、onBeforeCompile 和旧 EffectComposer 不能直接迁移到 WebGPURenderer，需要改为节点材质、TSL 和新后处理。

版本发布可能包含破坏性调整

Three.js 以 r 编号持续演进，没有传统长期稳定大版本承诺；升级每个 Release 都应阅读 Migration Guide 并做视觉回归。

GPU 资源不会由 GC 自动释放

移除对象后仍需对 Geometry、Material、Texture、RenderTarget 和 Pass 调用 dispose，否则单页应用容易泄漏显存。

纹理显存远大于下载体积

压缩 JPG/PNG 上传 GPU 后会展开；应控制分辨率、Mipmaps、数量和格式，并评估 KTX2/Basis 压缩。

模型必须为实时渲染优化

直接导出制作级资产会导致面数、材质、骨骼和贴图过重，应建立 glTF、压缩、LOD、合批与预算流程。

移动设备差异显著

GPU、内存、热降频和浏览器限制差异很大，应限制 Pixel Ratio、阴影、后处理和并发加载，并提供低质量模式。

响应式需要同步 Canvas 与 Camera

只用 CSS 缩放会降低清晰度或拉伸画面，应根据 Canvas 显示尺寸更新 Renderer、Camera Aspect 和 Projection Matrix。

渲染循环应按需运行

静态场景无需永久占用 requestAnimationFrame；标签页隐藏、组件卸载和不可见区域应暂停渲染与事件监听。

首屏与 SEO 需要额外设计

Canvas 内容不等同于可索引 HTML，应提供真实标题、正文、替代图像、加载状态和无 WebGL 降级内容。

无障碍不能依赖 3D Canvas

关键操作与信息要有可聚焦的 HTML 控件、文本说明、键盘路径和 Reduced Motion 方案。

Node.js 与 SSR 不能直接渲染浏览器场景

Three.js 常依赖 DOM、Canvas 和 GPU API；Next.js、Astro 等项目应把初始化放到客户端，并避免服务端访问 window。

第三方 Addon 质量不一

React 封装、物理、特效和 Loader 可能滞后 Three.js Release，升级前要核对 Peer Dependency、维护状态和资源释放行为。

QUICK START

快速开始

下面使用 Vite 创建一个会旋转且可交互的立方体，并展示 glTF 模型加载、响应式尺寸和资源释放。

1使用 Vite 创建项目并安装 Three.js

bash

npm create vite@latest three-demo -- --template vanilla-ts
cd three-demo
npm install
npm install three
npm run dev

2创建第一个可交互场景

typescript

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const canvas = document.querySelector<HTMLCanvasElement>("#scene")!;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f172a);

const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(3, 2, 4);

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x38bdf8 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

scene.add(new THREE.HemisphereLight(0xffffff, 0x223344, 2));
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

renderer.setAnimationLoop((time) => {
  cube.rotation.y = time * 0.0004;
  controls.update();
  renderer.render(scene, camera);
});

3让 Canvas 响应容器尺寸

typescript

function resize() {
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;

  if (canvas.width !== width || canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

const observer = new ResizeObserver(resize);
observer.observe(canvas);
resize();

4加载 glTF 模型

typescript

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

const loader = new GLTFLoader();

loader.load(
  "/models/product.glb",
  (gltf) => {
    scene.add(gltf.scene);
  },
  (event) => {
    const percent = event.total ? (event.loaded / event.total) * 100 : 0;
    console.log(`Loaded ${percent.toFixed(0)}%`);
  },
  (error) => console.error("Model load failed", error),
);

5组件卸载时释放资源

typescript

function disposeObject(root: THREE.Object3D) {
  root.traverse((object) => {
    if (!(object instanceof THREE.Mesh)) return;

    object.geometry.dispose();
    const materials = Array.isArray(object.material)
      ? object.material
      : [object.material];

    for (const material of materials) material.dispose();
  });
}

function cleanup() {
  renderer.setAnimationLoop(null);
  observer.disconnect();
  controls.dispose();
  disposeObject(scene);
  renderer.dispose();
}

6试用 WebGPURenderer

typescript

import * as THREE from "three/webgpu";

const renderer = new THREE.WebGPURenderer({
  antialias: true,
});

await renderer.init();
renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

// 生产采用前同时测试 WebGPU 与自动 WebGL 2 回退路径。

7执行发布前检查

bash

npm run lint
npm run typecheck
npm run build

# 测试移动端、低端 GPU、Reduced Motion、模型失败和显存释放

下一步：先用 WebGLRenderer 和 glTF 建立可靠基线，再根据真实需求评估 WebGPURenderer、TSL 和后处理；始终以目标设备测试帧率、显存、加载体积和降级体验。

ALTERNATIVES

类似项目

这些项目覆盖 Three.js 常见的 UI 框架、构建工具、类型系统与内容站点集成；外部项目则提供声明式封装或更完整的 Web 3D 引擎。

Babylon.js

面向 Web 的开源 3D 渲染与游戏引擎，集成 WebGL、WebGPU、物理、GUI、WebXR 和可视化工具链。

查看项目

React

用于构建 Web 和原生用户界面的组件化 JavaScript 库。

查看项目

Vue.js

渐进式 JavaScript 框架，易学易用且拥有优秀的性能表现。

查看项目

Vite

新一代前端构建工具，提供快速开发服务器和优化构建。

查看项目

TypeScript

为 JavaScript 添加类型语法，提升大型项目的开发体验。

查看项目

Astro

面向内容网站的 Web 框架，默认发送更少的客户端 JavaScript。

查看项目

R3F

React Three Fiber

Three.js 的 React Renderer，以声明式组件、Hooks 和 React 生态组织 3D Scene。

访问官网

PlayCanvas Engine

开源 JavaScript 游戏引擎，可独立使用，并配有协作式在线 Editor 与资产工作流。

访问官网

COMPARISON

Three.js vs Babylon.js

Three.js 与 Babylon.js 都能在浏览器中构建 WebGL、WebGPU 和 WebXR 体验。Three.js 更像灵活、可组合的 3D 图形库；Babylon.js 更接近功能集成度较高的完整 3D/游戏引擎。

比较维度	Three.js	Babylon.js
核心定位	通用 JavaScript 3D 图形库	完整 Web 3D 与游戏引擎
抽象方式	提供渲染原语和 Addons，由应用自行组合架构	引擎级模块、生命周期与工具集成更完整
WebGPU	WebGPURenderer、TSL 和节点材质，仍属实验状态	引擎层集成 WebGPU，并维持 WebGL 路径
材质与 Shader	内置材质、ShaderMaterial、节点材质与 TSL	PBR、Node Material Editor、Shader 与材质工具链
游戏能力	输入、物理、导航和 ECS 通常自行选择第三方方案	相机、输入、物理、GUI、粒子和调试工具集成更深
编辑工具	官方 Examples 与通用 Three.js Editor	Inspector、Sandbox、Node Editor 等工具更系统
文件加载	Addons 覆盖 glTF、FBX、OBJ、USDZ 等大量格式	以 glTF 为核心并提供引擎资产管线
框架生态	React Three Fiber、TresJS、Threlte 等成熟社区封装	通常直接使用引擎 API，也有社区框架集成
学习与控制	起步小、自由度高，但大型应用架构需自行设计	概念面更广，但常见引擎能力有统一方案
许可证	MIT	Apache-2.0
更适合	创意 Web、产品展示、可视化和定制渲染体验	大型交互应用、游戏和偏好一体化工具链的团队

如何选择

如果希望从轻量场景开始、自由组合 Web 技术与第三方生态，或项目重心是产品展示、创意页面和数据可视化，优先考虑 Three.js；如果需要更完整的游戏引擎能力、GUI、物理、Inspector 和统一工具链，Babylon.js 通常更直接。最终应使用真实资产和目标设备制作性能原型。

VERIFICATION

资料核验

版本、维护信息与本页采用的官方资料来源。

最后核验2026 年 8 月 13 日

核验版本Three.js 0.185.1 / r185

内容维护mrdoob / three.js contributors

项目维护状态活跃维护

npm 官方元数据核验的稳定版为 0.185.1，GitHub 最新正式 Release 为 r185。官方文档确认 WebGLRenderer 仍适合纯 WebGL 2 应用，WebGPURenderer 可回退 WebGL 2 但仍处于实验状态。官方仓库未归档，最近可见提交日期为 2026 年 8 月 12 日。

维护状态核验2026 年 7 月 26 日 · 最近可见代码活动：2026 年 8 月 12 日

官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 8 月 12 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。

查看官方仓库

官方来源7 项

Three.js 官方网站Three.js

Three.js FundamentalsThree.js Manual

WebGPURendererThree.js Manual

Loading 3D ModelsThree.js Manual

CleanupThree.js Manual

Three.js r185 Releasemrdoob · GitHub

Three.js Licensemrdoob · GitHub