把 GPU 渲染管线包成 JS 对象,让浏览器里跑 3D 像写 React 一样自然
更新于 2026-08-04
← 返回汇总Web 端 3D 图形的事实标准库
2010 年由 Ricardo Cabello(mrdoob) 发起的 JavaScript 3D 库。目标:易用、轻量、跨浏览器、通用。把 Scene / Camera / Renderer 三件套抽象成声明式 API,底层用 WebGL/WebGPU 调用 GPU。几乎所有 Web 上的 3D 产品(产品展示、数据可视化、WebXR、游戏)都建立在它或它的衍生框架(React Three Fiber、Babylon 早期借鉴)之上。
原生 WebGL 要手写 shader、管 buffer、算矩阵。一个旋转方块几百行,劝退大多数人。
2010 年代 WebKit/Gecko/IE 各家实现差异大,统一抽象层才能「写一次到处跑」。
数学(线性代数)、光照模型、空间分区门槛高。库封装掉细节,让 Web 开发者专注业务。
调用 renderer.render(scene, camera) 后,库内部按以下管线把 JS 对象转成 GPU 指令:
three.js 用「场景图」组织 3D 世界。每个 Object3D 有 transform(位置/旋转/缩放),父子关系自动继承变换矩阵。
three.js 不让你写完整 shader,而是提供「材质」声明外观,内部按场景特征动态拼接 GLSL。这是它易用性的核心。
// 你只写这一行 const mat = new THREE.MeshStandardMaterial({ color: 0x2b9246, roughness: 0.4, metalness: 0.8 }); // 库内部根据场景自动拼接 shader: // - 场景有 3 盏灯 → 注入 3 次 lighting 计算 // - 开了阴影 → 注入 shadowmap 采样 // - 用了 envMap → 注入 IBL 反射 // - 雾效开启 → 末尾乘雾色 // 结果:一份 GLSL,自动适配当前渲染状态
代价:shader 字符串由几十个 chunk 拼成,改一行要重编译。所以高级用户会用 onBeforeCompile 注入自定义代码,或直接用 ShaderMaterial 写裸 GLSL。
// 最小渲染循环 renderer.setAnimationLoop(() => { mesh.rotation.y += 0.01; renderer.render(scene, camera); }); // setAnimationLoop 用 // requestAnimationFrame, // 与浏览器刷新率同步 // (通常 60fps,VR 90fps)
import * as THREE from 'three'; // 1. 场景 + 相机 + 渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); // 2. 几何体 + 材质 → 网格 const cube = new THREE.Mesh( new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({ color: 0x2b9246 }) ); scene.add(cube); scene.add(new THREE.DirectionalLight(0xffffff, 1)); // 别忘了灯 camera.position.z = 3; // 3. 动画循环 renderer.setAnimationLoop(() => { cube.rotation.x += 0.01; renderer.render(scene, camera); });
| 项目 | 定位 | 关系 |
|---|---|---|
| React Three Fiber | React 声明式包装 | @react-three/fiber,把对象变成 JSX |
| drei | R3F 工具集 | 常用 helper 组件(OrbitControls、Loader) |
| Babylon.js | 竞品(微软系) | 偏游戏引擎,three 偏通用渲染 |
| PlayCanvas | 竞品(商业化) | 带编辑器,three 纯库 |
| model-viewer | Google Web 组件 | 底层用 three,封装成 <model-viewer> |
| Spline / Womp | 无代码 3D 工具 | 导出 three.js 场景给 Web |
| three.js examples | 1500+ 官方示例 | 事实上的文档和学习样本 |
WebGPU 迁移是未来 3 年主线——更接近现代图形 API,支持 Compute Shader,性能上限翻倍。114k stars + 15 年积累的生态护城河,Babylon 短期难超越。R3F 让它在 React 生态续命,无代码工具(Spline)降低门槛扩大用户基数。只要 Web 3D 存在,它就是基础设施。