three.js
浏览器端最主流的 JavaScript 3D 渲染库，封装 WebGL/WebGPU API，让开发者用声明式代码构建 3D 场景。
🎯 为什么需要它
原生 WebGL API 极其底层（数千行代码才能画一个三角形），three.js 将其抽象为场景图模型：Scene → Camera → Mesh → Renderer，几十行代码即可搭建完整的 3D 场景。没有它时，你需要手动处理着色器编译、缓冲区管理、矩阵运算等繁琐工作。
✅ 核心优势
- 生态绝对领先：NPM 周下载量 500 万+，是竞品 Babylon.js/PlayCanvas 的 300 倍，社区资源、教程、插件极其丰富
- WebGPU 零配置支持：r171（2025-09）起支持
import { WebGPURenderer } from 'three/webgpu'，自动回退 WebGL 2 - 框架集成成熟：React Three Fiber（R3F）是 React 生态的事实标准 3D 方案，Svelte/ Vue 也有官方适配
- 模块化设计：核心包 + addons 分离，按需引入 Controls/Loaders/PostProcessing，Tree-shaking 友好
- MIT 许可：商业项目无限制
⚡ 性能表现
| 场景 | 性能数据 | 说明 |
|---|---|---|
| 粒子系统（WebGPU） | 100 万+ 粒子 @ 60fps | WebGL 下约 5 万粒子即出现卡顿 |
| 渲染 1000 Mesh | r184 优化后无 GC 压力 | 旧版每帧产生 24-50 万临时对象 |
| 后处理管线 | MRT 单 Pass 输出颜色+法线 | 旧 EffectComposer 需两次完整场景渲染 |
| 构建体积 | ~150KB gzipped（核心） | addons 按需加载 |
WebGPU 的 Compute Shader 是真正的性能跃迁点：GPU 并行处理碰撞检测、实时光照、大规模数据过滤。
🚀 快速上手
安装
npm install three最小示例（WebGL）
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.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);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();WebGPU 示例（r171+）
import * as THREE from 'three/webgpu';
const renderer = new THREE.WebGPURenderer();
await renderer.init(); // WebGPU 需要异步初始化
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 其余代码与 WebGL 完全一致关键配置项
- Renderer.antialias：抗锯齿，性能敏感场景可关闭
- Renderer.outputColorSpace：
THREE.SRGBColorSpace确保颜色正确 - Renderer.toneMapping：
THREE.ACESFilmicToneMapping获得电影级色调 - Camera fov/near/far：影响深度精度和裁剪，far 值过大会导致 Z-fighting
- ShadowMap.type：
THREE.PCFSoftShadowMap平衡质量和性能
📦 适用场景
适合：
- 产品 3D 配置器（电商、汽车、家具）
- 数据可视化大屏（地理、网络拓扑、科学计算）
- 交互式品牌官网和创意营销页
- 浏览器端 3D 游戏和 VR/AR 体验
- 建筑/工程 BIM 可视化
不适合：
- 重度 AAA 游戏（应选 Babylon.js 或原生引擎，three.js 缺少内置物理/音频管线）
- 需要所见即所得编辑器的团队（PlayCanvas/Spline 更合适）
- 纯 2D 图表（D3.js/ECharts 更轻量）
- Node.js 服务端渲染 3D（需 headless GL，坑多）
⚠️ 已知坑 & 注意事项
- 版本升级 Breaking Changes：three.js 采用 r170/r180… 版本号，每个大版本都可能有 API 变动，升级前务必阅读 Migrating Guide
- r182 阴影回归 Bug：PointLight 阴影在 r182 出现 bias 回归，需手动调整
shadow.camera.near/far和shadow.bias - WebGPU 异步初始化：
WebGPURenderer需要await renderer.init()，忘记调用会静默失败 - EffectComposer 已过时：新的
RenderPipeline+ TSL 是 WebGPU 时代的后处理方案，新项目不要用 EffectComposer - 内存管理：手动 dispose Geometry/Material/Texture，否则 GPU 内存泄漏。使用
renderer.info监控 - 大场景优化：使用 InstancedMesh（万级同类物体）、LOD、Frustum Culling、Object3D.matrixAutoUpdate = false
🆚 竞品对比
| 维度 | three.js | Babylon.js | PlayCanvas |
|---|---|---|---|
| 性能 | WebGPU 后领先 | WebGL 时代接近 | 引擎级优化 |
| 上手难度 | 中等 | 较高（功能更多） | 低（可视化编辑器） |
| 生态 | 极其丰富 | 中等 | 较小 |
| 内置功能 | 渲染为核心 | 物理/音频/XR 全内置 | 编辑器+发布平台 |
| 适用场景 | 通用 3D Web | 游戏/XR | 快速原型/游戏 |
| 维护状态 | 极活跃（r184, 2026-04） | 活跃 | 活跃 |
| NPM 周下载 | 500 万+ | ~1.5 万 | ~1.5 万 |
选择建议：
- React 项目 → 直接用 React Three Fiber，它是 three.js 的 React 封装
- 需要完整游戏引擎（物理、音频、XR 一站式）→ Babylon.js
- 需要可视化编辑器快速出活 → PlayCanvas 或 Spline
- 其他所有 3D Web 场景 → three.js，生态和社区无可替代
🌍 生态 & 社区
- 维护状态：r184（2026-04-16），每月至少一个版本，47000+ commits
- 文档质量：API 文档完整，Manual 和 Examples 覆盖广，800+ 官方示例
- 周边生态：
- React Three Fiber — React 封装，最流行的使用方式
- Drei — R3F 的实用工具集
- Three.js Editor — 在线编辑器
- glTF 格式 — 3D 资产标准，three.js 原生支持
- TSL（Three.js Shading Language）— 跨 WebGPU/WebGL 的着色器语言
- 社区活跃度：Discord 社区活跃，Forum 响应快，GitHub Issues 24h 内有回复
💡 引入评估
| 维度 | 评分（/5） | 备注 |
|---|---|---|
| 上手难度 | ⭐⭐⭐⭐ | 基础简单，高级优化需经验 |
| 文档完善度 | ⭐⭐⭐⭐⭐ | 800+ 示例，Manual 详尽 |
| 社区活跃 | ⭐⭐⭐⭐⭐ | 112k Stars，500 万周下载 |
| 性能 | ⭐⭐⭐⭐ | WebGPU 后大幅提升 |
| 稳定性 | ⭐⭐⭐⭐ | 版本迭代快，需关注 Breaking Changes |
| 综合 | ⭐⭐⭐⭐⭐ | Web 3D 的事实标准 |
结论：强烈推荐 — three.js 是 Web 3D 领域无可争议的标准选择。生态成熟度、社区规模、性能表现均为最佳。唯一注意的是版本升级节奏较快，建议锁定版本号而非使用 latest。
推荐引入版本：0.184.0（2026-04-16 最新稳定版）
🔗 相关链接
- JavaScript WebGL WebGPU React Three Fiber 3D渲染
- 官方文档
- Manual
- Examples
- Changelog / Releases
- Migrating Guide
- Discord
- Forum
📝 个人备注
（留白，供后续补充实际使用心得）