把 3D 放进浏览器、或者做成一个能跑起来的游戏，需要一条完整的栈：渲染（WebGL/WebGPU）→ 框架（three.js/babylon.js）→ 引擎（UE/Unity）→ 资产（Blender）。
这里偏动手：从 three.js 的第一个场景，到着色器、性能优化、引擎选型与 Blender 资产管线，按顺序整理，Web 3D 和游戏开发者可以按需取用。
先用工具试一下：
| 工具 | 能做什么 | 入口 |
|---|---|---|
| 3D Viewer | Web 端 3D 资产快速预览 | 打开 |
| Sculpt | 浏览器内雕刻建模 | 打开 |
一、three.js 入门与实战
- Three.js游戏开发入门
- Three实战3D射击游戏#1
- Three.js 3D模型爆炸分解
- Three.js可交互粒子
- 体渲染Three.js实现
- Three.js添加HDRI背景
- Three.js 构建 3D 配置器
- Threejs三维曲面实现
- Three.js体素化原理及实现
二、Web 图形与渲染（WebGL / WebGPU / SVG）
- SVG 在线编辑与查看完全指南：从格式到实用技巧
- WebGL着色器简明教程
- WebGPU迁移指南
- Three.js PBR渲染入门
- PBR纹理的10种贴图
- Mitsuba 3多视角渲染
- Nvdiffrast可微渲染库
- 最好的栅格着色器实现
- Three渲染真实景观
- Babylon.js大场景优化实战
- 为什么我选择Babylon JS
三、游戏引擎：UE / Unity
四、Blender 与资产管线
- Blender动画简明教程
- Blender Python开发入门
- Blender程序化建模入门
- Blender UV映射简明教程
- Blender重拓扑入门
- Blender拓扑指南
- Blender减面修改器
- 10个必备的Blender插件
- Blender的5个顶级AI插件
- Blender关键帧动画教程
五、元宇宙与 Web 3D 应用
常见问题
Q：three.js 和 babylon.js 怎么选？
three.js 生态与资料更多、上手快；babylon.js 工程化与编辑器更完整（含物理、材质库）。团队熟悉哪个就用哪个，能力差异不大。
Q：WebGPU 现在能用了吗？
主流浏览器已逐步放开，适合新的图形/计算密集型项目；生产上仍需 WebGL 兜底。
Q：Web3D 性能优化先做什么？
顺序通常是：减面/Draco 压缩 → 纹理尺寸与格式 → 实例化/合批 → LOD。先测量再优化。
Q：做数字孪生用 three.js 还是 UE？
浏览器交付、覆盖广选 Web 栈；高保真、强仿真、局域网/客户端可控选 UE。两者也常组合（UE 像素流或数据与 Web 双端）。
继续逛：3D 格式与在线查看完全指南 · BIM / IFC 完全指南 · 点云 / 3D 扫描 / 感知完全指南 · CAD / 制造 / G-Code 完全指南 · GIS / 地图 / 城市 3D 完全指南 · 数字孪生完全指南 · AI × 3D / 生成式 AI 完全指南
最后更新：2026-10-14 ｜ BimAnt 编辑部