网页 3D 从哪学起？three.js：11.8 万星的 JavaScript 3D 库

GitHub 仓库

mrdoob/three.js

总 Stars

★ 117,965

主要语言

JavaScript

查看 GitHub 项目

结论先说：three.js 是本批编辑精选，总量 117,965 星（API 核验：JavaScript 编写、MIT 协议、11 月 9 日仍在推送；11 月 9 日榜单前列大多已发过，本篇如实标注非当日榜单）。

它是什么

three.js 把 WebGL 的底层细节包了起来：场景、相机、光照、材质、几何体，几十行代码就能搭出一个能转动的 3D 模型。官方有海量示例，从简单的旋转立方体到完整的 3D 编辑器都有，文档和例子是最好的老师。

能干嘛

产品页的 3D 展示是最常见的用法：家具、鞋子、汽车，鼠标拖着转一圈比十张图管用；数据可视化可以做 3D 散点和地形；小游戏、互动广告、虚拟展厅也都能做；配合 WebXR 还能进 VR 和 AR。

适合谁

前端开发者想补 3D 技能的首选。

问：three.js 和直接用 WebGL、Babylon.js 怎么选？

直接写 WebGL 等于手写汇编，three.js 是高级语言；Babylon.js 更偏游戏引擎，编辑器和工具链更重，three.js 更轻、生态更大。我的看法是：做网页里的 3D 展示和可视化，three.js 的例子和社区基本够用了；做复杂 3D 游戏再考虑 Babylon.js 或专业引擎。

注意点

3D 场景的性能要实测：模型面数、贴图大小、阴影开销，手机上很容易翻车；版本更新不算慢，大版本之间 API 会有 breaking change，抄教程时先对一下版本号；官方示例是最好的学习材料，第三方教程质量参差不齐。

站长点评

three.js 是我心里“常青项目”的代表：11.8 万星不是一天涨出来的，是十几年攒下来的口碑。