Three.js

最流行的 JavaScript 3D WebGL 渲染库，为浏览器提供简洁的 API 创建和展示交互式 3D/2D 图形体验

精选工具动画3D渲染WebGLWebGPU

Three.js 是 Web 3D 领域的事实标准，npm 周下载量达 270 万次，支持 WebGL/WebGPU，拥有丰富的生态系统和大量企业级应用。

Three.js

最流行的 JavaScript 3D WebGL 渲染库，为浏览器提供简洁的 API 创建和展示交互式 3D/2D 图形体验。

技术简介说明

Three.js 是一个基于 WebGL 和 WebGPU 的 JavaScript 3D 库，由 Ricardo Cabello（mrdoob）于 2010 年创建并维护至今。它的核心目标是降低 WebGL 的使用门槛——WebGL 原生 API 极其底层且复杂，开发者需要手写着色器、管理缓冲区、处理矩阵变换才能渲染一个简单立方体，而 Three.js 通过封装 Scene、Camera、Mesh、Material 等高层抽象，让开发者用几行代码就能构建完整的 3D 场景。

作为当前 Web 3D 领域事实上的标准库，Three.js 占据了压倒性的市场份额——npm 周下载量达到 270 万次，是竞争对手 Babylon.js 的约 270 倍。它被广泛应用于数据可视化、产品配置器、游戏、建筑可视化、虚拟现实（VR/AR）、艺术装置、营销落地页等领域。Ford、Google、NASA、IKEA、Disney 等知名企业均在其项目中使用 Three.js。

Three.js 本质上是一个渲染库而非完整引擎——它提供了场景管理、渲染管线、材质系统、光照模型等核心 3D 能力，但不内置物理引擎、游戏循环或编辑器。这种"最小内核 + 丰富生态"的设计哲学赋予了它极高的灵活性，开发者可以根据需求自由组合生态中的物理引擎（Rapier、Cannon-es）、后处理库（postprocessing）、动画库（GSAP）和 React 集成层（React Three Fiber），打造适合自己项目的技术方案。

基本信息

项目	详情
官网	https://threejs.org/
GitHub	https://github.com/mrdoob/three.js
License	MIT（© 2010–2026 three.js authors）
最新版本	r185（v0.185.1），发布于 2026 年 7 月 1 日
主要维护者	Ricardo Cabello（mrdoob）及社区核心贡献者
GitHub Stars	~114K
Forks	~36.4K
npm 周下载量	~270 万（2026 年中）
使用仓库数	~570K（GitHub）
语言构成	JavaScript 64.3%、HTML 33.1%
Topics	javascript, webgl, webgl2, webgpu, webxr, 3d, augmented-reality, virtual-reality

快速上手

安装

# npm
npm install three
 
# pnpm
pnpm add three
 
# yarn
yarn add three
 
# CDN（不推荐生产环境）
<script src="https://unpkg.com/three@latest/build/three.module.js" type="module"></script>

基础配置

推荐使用 Vite 作为构建工具，它对 ES Module 和 Tree Shaking 有良好支持：

npm create vite@latest my-three-app -- --template vanilla
cd my-three-app
npm install three
npm install -D vite

如果使用 TypeScript，Three.js 内置了类型定义，也可安装社区维护的增强类型：

npm install -D @types/three

最小示例（基础 3D 场景）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Three.js 最小示例</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from 'three'
 
    // 1. 创建场景
    const scene = new THREE.Scene()
    scene.background = new THREE.Color(0x1a1a2e)
 
    // 2. 创建透视相机（FOV, 宽高比, 近裁剪面, 远裁剪面）
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    )
    camera.position.z = 3
 
    // 3. 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    document.body.appendChild(renderer.domElement)
 
    // 4. 创建网格（几何体 + 材质）
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshStandardMaterial({ color: 0x00d4ff })
    const cube = new THREE.Mesh(geometry, material)
    scene.add(cube)
 
    // 5. 添加光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
    scene.add(ambientLight)
 
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
    directionalLight.position.set(5, 5, 5)
    scene.add(directionalLight)
 
    // 6. 动画循环
    function animate() {
      requestAnimationFrame(animate)
      cube.rotation.x += 0.01
      cube.rotation.y += 0.01
      renderer.render(scene, camera)
    }
 
    // 7. 响应窗口变化
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    })
 
    animate()
  </script>
</body>
</html>

核心概念与架构

核心概念

Three.js 的架构围绕一条清晰的数据流展开：场景 → 相机 → 渲染器 → 画布。

概念	说明
Scene（场景）	3D 世界的容器，所有对象、光源和相机的根节点。支持雾效（Fog）和背景设置
Camera（相机）	定义观察视角。常用 `PerspectiveCamera`（透视投影，近大远小）和 `OrthographicCamera`（正交投影，无透视变形）
Renderer（渲染器）	将场景和相机渲染到 `<canvas>` 元素。`WebGLRenderer` 是经典渲染器，`WebGPURenderer`（r171+）是新一代渲染器
Mesh（网格）	可渲染的 3D 对象，由 Geometry + Material 组合而成
Geometry（几何体）	定义物体的形状——顶点位置、法线、UV 坐标等。内置 BoxGeometry、SphereGeometry、PlaneGeometry 等，也支持从 glTF/OBJ 加载
Material（材质）	定义物体的外观。包括 `MeshStandardMaterial`（PBR 标准材质）、`MeshPhysicalMaterial`（物理材质）、`ShaderMaterial`（自定义着色器）等
Light（光源）	照亮场景的光源类型：`AmbientLight`（环境光）、`DirectionalLight`（平行光）、`PointLight`（点光源）、`SpotLight`（聚光灯）、`RectAreaLight`（矩形面光）等
Texture（纹理）	为材质提供表面细节。支持标准图片纹理、法线贴图、环境贴图（HDR）、压缩纹理（KTX2/DDS）等
Object3D	所有场景对象的基类，提供位置（position）、旋转（rotation）、缩放（scale）和层级变换能力
AnimationMixer	骨骼动画和关键帧动画的混合和播放控制器
Raycaster（射线投射）	用于 3D 拾取/交互，从相机发射射线检测与哪些物体相交
BufferGeometry / BufferAttribute	GPU 友好的底层几何数据格式，直接对应 GPU 缓冲区

渲染管线

JavaScript 应用层
    │
    ├── Scene Graph（场景图：Object3D 树形结构）
    │      ├── Mesh (Geometry + Material)
    │      ├── Light(s)
    │      └── Camera
    │
    ▼
Renderer（渲染器）
    │
    ├── 视锥剔除（Frustum Culling）— 剔除相机视野外的对象
    ├── 渲染列表排序 — 透明/不透明对象排序
    ├── 着色器编译 — Material → GPU Shader Program
    │      ├── WebGL: GLSL 编译
    │      └── WebGPU: TSL → WGSL/GLSL 编译
    │
    ▼
GPU 绘制
    ├── 顶点处理 → 图元装配 → 光栅化 → 片元处理
    ├── 阴影贴图（Shadow Map）
    ├── 后处理通道（Post-Processing，可选）
    │
    ▼
Canvas 像素输出

核心特性

1. WebGPU 渲染器

Three.js 从 r171（2025 年 9 月）开始提供生产可用的 WebGPU 渲染器，通过 three/webgpu 入口导入。WebGPU 渲染器提供：

自动 WebGL 2 回退——不支持 WebGPU 的浏览器自动降级
TSL（Three Shading Language）——统一的节点式着色器语言，同时编译到 WGSL（WebGPU）和 GLSL（WebGL），实现"一次编写、两端运行"
异步初始化（await renderer.init()）
比 WebGL 渲染器在 draw call 密集场景下快 2-10 倍
计算着色器支持——粒子系统可从 5 万提升到 100 万+，物理模拟从 ~1000 提升到 10 万+

2. 丰富的材质与着色器系统

内置 20+ 种材质类型，从基础 MeshBasicMaterial 到 PBR MeshStandardMaterial/MeshPhysicalMaterial，再到完全自定义的 ShaderMaterial 和 NodeMaterial。支持法线贴图、位移贴图、环境光遮蔽贴图、清晰涂层（clearcoat）、 sheen、 iridescence 等高级 PBR 效果。

3. 完整的场景图与变换系统

基于 Object3D 的树形场景图，支持位置、旋转、缩放、矩阵变换的层级继承。内置视锥剔除（frustum culling）自动跳过不可见对象，LOD（Level of Detail）系统根据距离切换模型精度，可提升帧率 30-40%。

4. 高级光照与阴影

支持多种光源类型和实时阴影。阴影系统基于 Shadow Map，支持 PCF 软阴影和 VSM _variance shadow map。WebGPU 渲染器下支持更先进的节点式光照模型。

5. 后处理管线

通过 EffectComposer 和 postprocessing 库实现电影级后处理效果，包括：Bloom（泛光）、SSAO/SSR（屏幕空间环境光遮蔽/反射）、景深（DOF）、色调映射（Tone Mapping）、FXAA/TAA 抗锯齿、运动模糊等。

6. 模型加载与格式支持

支持主流 3D 格式：glTF/GLB（推荐）、FBX、OBJ、STL、DAE（Collada）、3DS 等。GLTFLoader 是核心加载器，支持 PBR 材质、骨骼动画、变形目标（Morph Targets）、扩展（KHR_draco_mesh_compression 等）。配合 gltfpack 可压缩模型 50-90%。

7. WebXR 与 AR/VR 支持

原生支持 WebXR API，可直接开发 VR/AR 应用。提供 VRButton、ARButton 辅助工具，支持 WebXR Hand Tracking（手部追踪）和 Hit Test（命中测试）。

8. 计算着色器与 GPU 通用计算

通过 WebGPU 渲染器和 TSL，开发者可以直接在着色器中编写计算逻辑，实现 GPU 加速的物理模拟、粒子系统、流体模拟、机器学习推理等。这是 WebGL 时代无法实现的能力。

9. 动画系统

内置 AnimationMixer 支持骨骼动画和关键帧动画。支持动画混合、交叉淡入淡出、时间缩放。可与 GSAP 配合实现复杂的时间轴动画编排。

10. 几何体与实例化

InstancedMesh 允许用单次 draw call 渲染数千个相同几何体的实例，是大规模场景的关键优化手段。配合 InstancedBufferAttribute 可自定义每个实例的属性（位置、颜色、缩放等）。

生态图

Three.js 拥有 Web 3D 领域最庞大、最活跃的生态系统。

核心生态

库	说明	维护方
React Three Fiber	Three.js 的 React 渲染器，用 JSX 声明式构建 3D 场景。~30K Stars，~70 万 npm 周下载	pmndrs
Drei	R3F 的瑞士军刀，提供 150+ 即开即用的辅助组件（OrbitControls、Text、Environment、Html、useGLTF 等）	pmndrs
Rapier	Rust 编写的高性能物理引擎（WebAssembly），R3F 首选物理方案	pmndrs
Cannon-es	轻量级 JavaScript 3D 物理引擎，适合简单刚体物理场景	社区
postprocessing	高性能后处理库，支持合并兼容效果为单次着色器 pass	pmndrs
GSAP	业界顶级动画库，与 Three.js 配合实现流畅的相机动画、对象变换和时间轴编排	GreenSock
Leva	React 优先的 GUI 调试面板，方便调整 3D 参数	pmndrs
three-perf	性能监控工具，显示 draw calls、三角形数、纹理数和帧时间	pmndrs

扩展生态

库	说明
N8AO	物理精确的接触阴影（Ambient Occlusion）
Lamina	基于层的着色器材质系统
gltfpack	glTF 模型压缩工具，压缩率 50-90%
three-mesh-bvh	Bounding Volume Hierarchy 加速库，提升射线投射性能
Troika	高质量 3D 文本渲染（SDF 方案）
TresJS	Vue 生态的 Three.js 集成（类似 R3F 之于 React）
Threlte	Svelte 生态的 Three.js 集成

关键依赖

无运行时依赖——Three.js 核心零依赖，纯 JavaScript 实现
可选依赖：fflate（压缩解压）、meshoptimizer（gltfpack 运行时）
构建工具推荐：Vite（原生 ES Module 支持，Tree Shaking 友好）

适用场景

产品配置器与展示 — 汽车、家具、鞋类等的在线 3D 展示和自定义配置（IKEA Place、Ford 车辆展示）
数据可视化 — 3D 地球、科学数据可视化、大规模数据点渲染（NASA 卫星追踪、Cambridge University Press）
营销落地页与创意网站 — 沉浸式品牌体验、滚动驱动的 3D 动画、交互式产品展示
建筑与室内设计可视化 — BIM 模型在线浏览、室内设计方案展示、虚拟看房
游戏原型与小游戏 — 浏览器端 3D 游戏、互动体验、教育游戏
VR/AR 体验 — WebXR 驱动的虚拟展厅、AR 产品预览、沉浸式教育内容
创意编码与艺术装置 — 生成艺术、粒子系统、音频可视化、互动装置

开发与工程化

项目结构推荐

src/
├── main.js              # 入口，初始化渲染器
├── scene/
│   ├── setup.js         # 场景、相机、光源配置
│   └── objects/         # 各 3D 对象模块
├── materials/           # 自定义材质与着色器
├── loaders/             # 模型/纹理加载逻辑
├── animations/          # 动画控制器
├── utils/               # 工具函数（响应式、射线检测等）
└── assets/              # glTF 模型、纹理、HDR 环境贴图

构建与打包

Vite 是官方推荐构建工具，支持按需导入和 Tree Shaking
Three.js 支持 ESM 按需导入以减小包体积：import { BoxGeometry } from 'three'
使用 three/addons/ 路径导入扩展模块（loader、controls、后处理等）
生产构建配合 vite-plugin-compression 启用 gzip/brotli 压缩

TypeScript 支持

Three.js 从 r150+ 逐步增强内置类型定义
社区维护的 @types/three 提供更完整的类型覆盖
WebGPU 相关类型通过 three/webgpu 入口自动提供
2025-2026 年类型支持持续改善，已接近生产级

测试策略

单元测试：对场景逻辑、工具函数使用 Vitest/Jest
视觉回归测试：使用 pixelmatch 或 reg-suit 对比渲染截图
E2E 测试：Playwright 截图对比 3D 场景渲染结果
性能测试：使用 three-perf 或 Chrome DevTools Performance 面板

性能与安全

性能优化要点

优化方向	具体措施
Draw Call	目标 < 100 次/frame；使用 `InstancedMesh` 合并相同几何体；使用 `BufferGeometryUtils.mergeGeometries()` 合并静态网格
几何体	合理控制面数；使用 LOD 系统根据距离切换精度（可提升帧率 30-40%）；使用 Draco 压缩 glTF
纹理	使用 KTX2 压缩纹理（GPU 直接解压）；纹理图集（Atlas）减少绑定切换；合理设置纹理尺寸
内存管理	手动调用 `.dispose()` 释放 Geometry、Material、Texture——Three.js 不会自动清理 GPU 资源
渲染策略	静态场景使用按需渲染（render on demand）而非持续帧循环；限制 `devicePixelRatio`（建议 `Math.min(devicePixelRatio, 2)`）
剔除优化	确保 BoundingBox 准确以启用视锥剔除；使用遮挡剔除减少过度绘制
WebGPU 加速	迁移到 WebGPU 渲染器获得 2-10x draw call 密集场景加速；利用计算着色器处理粒子/物理

安全注意事项

CVE	影响	修复版本	说明
CVE-2020-28496	不受控资源消耗（DoS）	≥ 0.125.0	处理 RGB/HSL 颜色时触发
CVE-2022-0177	跨站脚本（XSS）	≥ 0.137.0	加载不可信 iframe 时注入恶意 JS

安全实践建议：

始终保持 Three.js 版本 ≥ 0.137.0（建议直接使用最新版 r185）
加载外部 3D 模型时验证文件来源，避免加载不可信的 glTF/OBJ 文件
glTF 中的 JavaScript 扩展（如 KHR_xmp 中的脚本）可能被执行，需做沙箱处理
对用户上传的纹理图片做 CORS 和类型校验
使用 renderer.setClearColor() 避免 canvas 内容泄露到同源策略之外

技术对比

特性	Three.js	Babylon.js	PlayCanvas	WebGPU 原生 API
定位	轻量 3D 渲染库	完整游戏/3D 框架	游戏引擎（含云编辑器）	底层 GPU API
License	MIT	MIT	MIT（引擎）/ 付费（编辑器）	浏览器标准
包体积	~150KB（核心）	~600KB+	~300KB+	0（浏览器内置）
学习曲线	中等	较低（高层抽象更多）	中等（类 Unity）	极高
WebGPU 支持	✅ 生产可用（r171+）	✅ 较成熟	⚠️ Beta 中	✅ 原生
物理引擎	❌ 生态集成（Rapier 等）	✅ 内置 Havok	✅ 内置	❌ 无
编辑器	社区编辑器（基础）	✅ 免费 Web 编辑器	✅ 云编辑器（付费）	❌ 无
React 集成	✅ R3F（生态核心）	⚠️ 社区方案	⚠️ 社区方案	❌ 无
npm 周下载量	~270 万	~1 万	~3 万	N/A
GitHub Stars	~114K	~23K	~10K	N/A
社区规模	最大，Stack Overflow 回答丰富	中等，Microsoft 支持	中等，商业支持	开发者文档
适用场景	创意/营销/可视化/灵活架构	游戏/企业应用/XR/全功能	游戏开发/工作室管线	引擎开发/极致性能
灵活性	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
开箱即用	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐

选择建议

选 Three.js：需要最大灵活性、丰富生态、社区支持；创意编码和营销网站；已有 React 技术栈（R3F）
选 Babylon.js：需要开箱即用的完整方案（物理、编辑器、碰撞）；企业级游戏和 XR 应用；偏好 TypeScript-first 设计
选 PlayCanvas：游戏开发团队，需要类似 Unity 的可视化编辑器和工作流
选 WebGPU 原生：开发引擎级工具、需要极致 GPU 控制、不在乎开发效率

最佳实践

架构层面

关注点分离 — 渲染逻辑、场景管理、资源加载、动画控制分模块组织，不要把所有代码堆在一个文件
资源预加载 — 使用 LoadingManager 统一管理资源加载进度，显示加载界面
场景图优化 — 减少不必要的嵌套层级；使用 Group 组织逻辑相关的对象
单例渲染器 — 一个页面只创建一个 WebGLRenderer/WebGPURenderer 实例

性能层面

InstancedMesh 优先 — 超过 10 个相同几何体的实例就该用 InstancedMesh
按需渲染 — 静态场景不需要每帧渲染，仅在状态变化时调用 renderer.render()
复用材质和几何体 — 相同外观的对象共享 Material 实例；相同形状共享 Geometry 实例
手动 dispose — 在 React useEffect cleanup、组件卸载、场景切换时释放所有 GPU 资源
限制 Pixel Ratio — renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) 避免 4K 屏过度渲染
使用 KTX2 纹理 — 相比 PNG/JPG，KTX2 在 GPU 端直接解压，节省内存和带宽

开发体验

用 React Three Fiber 做 React 项目 — 声明式 API、组件化、自动清理、完善的生态
用 Leva 做调试面板 — 运行时调参比改代码重编译高效得多
用 three-perf 做性能分析 — 实时监控 draw calls、三角面数、帧时间
渐进式 WebGPU 迁移 — 先切换渲染器 → 再逐步将 GLSL 着色器转为 TSL → 最后利用计算着色器

技术局限与边界

已知局限

局限	说明	缓解方案
非完整引擎	不内置物理、碰撞、音频、游戏循环、ECS	需要组合生态库（Rapier + GSAP + 自定义循环）
内存管理手动	Three.js 不自动释放 GPU 资源，泄漏是常见问题	建立严格的 dispose 规范；使用 `WeakRef` 或 `useEffect` cleanup
单线程瓶颈	主线程承担 JS 逻辑 + 渲染调度，大场景易卡顿	Web Worker 加载/解析模型；WebGPU 计算着色器分担 GPU 任务
大场景上限	浏览器 Tab 的 GPU/内存资源有限，万级对象场景需精心优化	LOD + Instancing + 视锥剔除 + 遮挡剔除；考虑分块加载（Chunk Loading）
移动端功耗	持续 WebGL/WebGPU 渲染导致移动设备发热和电量消耗	按需渲染；降低分辨率；检测用户交互状态暂停渲染
着色器迁移成本	从 GLSL 迁移到 TSL/WebGPU 需要重写自定义着色器	TSL 同时编译到 GLSL/WGSL，一次迁移两端受益；渐进式迁移
SEO 不友好	Canvas 内容无法被搜索引擎索引	提供降级内容（静态图片 / `<noscript>` 标签）；使用 SSR 生成文本描述
可访问性	3D Canvas 对屏幕阅读器不友好	提供键盘导航替代；添加 ARIA 标签；设计降级方案

不适合的场景

服务端 3D 渲染 — Three.js 面向浏览器设计，Node.js 环境需要 headless-gl 等模拟方案
高性能 AAA 游戏 — 浏览器性能和 API 限制无法满足；考虑 Unity/Unreal
CAD/精确工程 — Three.js 是视觉优先的库，不适合需要微米级精度的 CAD 应用；考虑 OpenCASCADE
原生移动应用 — 考虑 RealityKit（iOS）、Sceneform（Android）

学习资源

官方资源

Three.js 官方文档 — API 参考和手册
Three.js 官方示例 — 数百个分类示例，覆盖所有功能
Three.js 论坛 — 活跃的社区问答
Three.js WebGPU 文档 — WebGPU 渲染器使用指南

系统课程

Three.js Journey — 最受推荐的完整课程，从零基础到高级，涵盖基础、着色器、React Three Fiber、物理、性能优化
SBCode Three.js 教程 — 免费的分步教程，适合入门
Wawa Sensei — React Three Fiber 课程 — 专注 R3F 的实战课程

书籍

《Learn Three.js》（第三版）— Jos Dirksen 著，社区推荐入门书
《Discover Three.js》 — 免费在线书籍，配合 Tips & Tricks 使用

进阶资源

Awesome Three.js — 精选资源清单
Three.js Resources — 分类整理的所有 Three.js 相关资源
Field Guide to TSL and WebGPU — TSL 着色器开发指南
100 Three.js Performance Tips — 2026 年最新性能优化指南
Three.js Tips and Tricks — 实用技巧集锦

2026 年现状

版本与发布

最新版本：r185（v0.185.1），2026 年 7 月 1 日发布
Three.js 保持月度发布节奏，2025-2026 年已发布超过 15 个版本
关键版本里程碑：
- r170（2025.08）— 图形模块迁移至 addons
- r171（2025.09）— WebGPU 渲染器零配置生产就绪
- r180（2025.09）— 纹理绑定和深度修复
- r182（2025.12）— 稳定版
- r185（2026.07）— 最新版本

WebGPU 迁移进展

WebGPU 已在 2025 年末实现所有主流浏览器的基线支持（Chrome 113+、Firefox 141+、Safari 26+）
全球约 95% 用户的浏览器支持 WebGPU
2026 年 Web Almanac 报告显示 65% 的新 Web 3D 应用使用 WebGPU，较两年前的 8% 大幅增长
Three.js 的 WebGPU 渲染器已成为新项目的首选默认渲染器
TSL 着色器语言日趋成熟，支持同时编译到 WGSL 和 GLSL
计算着色器为粒子系统、物理模拟、后处理带来 10-100x 性能提升

社区活跃度

npm 周下载量：~270 万（2026 年中），是 Babylon.js 的 270 倍
GitHub Stars：~114K
GitHub Releases：177 个版本
使用仓库：~570K
企业用户：3,483 家公司（TechnologyChecker 追踪），含 Ford、Google、NASA、IKEA、Disney 等
相关职位增长：2025-2026 年增长约 25%
"Vibe Coding"趋势：Three.js 成为 AI 辅助编程（Cursor、Claude Code 等）最常被调用的 3D 库
社区平台：Discourse 论坛、Reddit r/threejs、Discord（pmndrs）保持高活跃度

总结

Three.js 在 2026 年处于 Web 3D 领域的绝对统治地位。WebGPU 的成功迁移使其进入了一个新的性能纪元，TSL 着色器语言提供了跨后端的统一开发体验。庞大的生态系统（尤其是 React Three Fiber + Drei）使其在 React 项目中成为默认选择。虽然它本质上是一个渲染库而非完整引擎，但这恰恰是其最大优势——灵活性和可组合性让它能适应从简单动画到复杂可视化的所有场景。对于任何需要在浏览器中创建 3D 体验的前端开发者，Three.js 仍然是首选技术栈。