建筑、海洋、暴雨、飞雪，这些 Three.js 效果到底有多硬核？@柳杉前端
最近在 GitHub 上挖到一位 Three.js 宝藏作者 achrefelouafi，仓库里几乎全是程序化建筑、海洋模拟、草地系统、雨雪粒子、地球渲染的硬核实战。本文带你看他最火的 8 个项目跑起来的效果，并一次性盘点他所有的 Three.js 项目。
一个 Three.js 宝藏作者，8 个硬核实战项目全盘点
前言
最近在 GitHub 上冲浪时，挖到了一位 Three.js 宝藏作者——achrefelouafi（https://github.com/achrefelouafi）。
他的仓库几乎全是 Three.js 的硬核实战项目：程序化建筑生成、海洋模拟、草地系统、雨雪粒子、地球渲染……每一个拿出来都是可以直接学习借鉴的案例。
今天就带大家把他最火的项目跑起来看看效果，并把他所有 Three.js 项目一次性盘点给大家。
8 大开源项目，全部克隆跑通实测
Star 前 8 项目：开源地址 + 实测介绍
这次不是云推荐，前 8 个项目我全部克隆下来、npm install && npm run dev 跑通并截了运行图，每一个都是真实可跑的。
BuildingGeneratorThreeJS（298 star）程序化香港建筑生成器
开源地址：https://github.com/achrefelouafi/BuildingGeneratorThreeJS
本文开头实测的主角，把 Blender 592 个几何节点的建筑生成系统逆向移植到 Three.js，18 个参数实时“盖楼”，运行效果见上文截图，不再赘述。
SnowSystemThreeJS（59 star）雪地与飘雪系统
开源地址：https://github.com/achrefelouafi/SnowSystemThreeJS
夜空星光下是一整块可交互的积雪地形，雪面上还有一个个凹陷的脚印坑洞，积雪的厚度感、颗粒噪点质感都做出来了，配合飘落的雪花粒子，氛围感很足，不只是简单的雪花粒子效果。
WaterThreeJS（53 star）电影级水面渲染
开源地址：https://github.com/achrefelouafi/WaterThreeJS
一片海滩、浅滩、深水区拼成的完整水体场景，GUI 面板分组做得很专业：Cinematic 运镜、Time of day 时段、Waves 波浪、Foam 泡沫、体积云、水下模式，点一下“dive under”还能直接潜入水下视角，左上角实时显示水面深度状态。
OceanThreejs（50 star）超写实 FFT 海洋模拟
开源地址：” target=”_blank” rel=”noopener noreferrer”>https://github.com/achrefelouafi/OceanThreejs
标题就叫 Ultra-Realistic Ocean，基于 JONSWAP 海浪频谱和 FFT 快速傅里叶变换做的物理级海面模拟，风速、风向、Fetch 距离、涌浪方向、FFT 分辨率、反射折射菲涅尔全部可调，是学习实时海洋渲染算法的绝佳参考。
GrassSystemThreeJS（49 star）SOIL STUDIO 草地土壤系统
开源地址：https://github.com/achrefelouafi/GrassSystemThreeJS
作者把它做成了一个小型土壤工作室：真实感土壤材质、苔藓覆盖、草叶分布、风场摆动、光照云层一应俱全，还支持拖拽雕刻地面（SCULPT THE GROUND），交互性比普通 demo 强不少。
VegetationGeneratorThreeJS（45 star）WebGPU 藤蔓植被生成器
开源地址：https://github.com/achrefelouafi/VegetationGeneratorThreeJS
这个项目用了 three.js 的 WebGPU 渲染器，在任意模型（内置球体，也可以加载自己的 .glb）表面拖拽绘制路径，常春藤就会沿路径生长，茎干半径、分枝密度、叶片大小、开花位置、风力摆动全部实时可调，还带生长动画回放。
GeometryPainterThreeJS（37 star）WebGPU 水晶绘制器
开源地址：https://github.com/achrefelouafi/GeometryPainterThreeJS
同样基于 WebGPU：在球体表面拖拽笔刷，紫水晶簇会沿笔迹长出来，可以切换调色板、调整晶簇密度、尺寸、通透度，配合 Bloom 辉光和生长动画，效果很出片。
RainSystemThreeJS（21 star）RAIN STUDIO 雨景系统
开源地址：https://github.com/achrefelouafi/RainSystemThreeJS
一个完整的雨景工作室：雨丝粒子、地面水坑涟漪、积水反射、乌云，还有一个“Strike Now”按钮可以手动触发闪电。支持导入自己的 .glb 模型放进雨里淋，官方提示语就是 IMPORT A .GLB TO TEST IT IN THE RAIN。
其余项目速览
| 项目 | Star | GitHub 地址 | 简介 |
|---|---|---|---|
| BasicProceduralBuilding | 16 | https://github.com/achrefelouafi/BasicProceduralBuilding | 低多边形程序化小楼，入门首选 |
| EarthThreeJS | 14 | https://github.com/achrefelouafi/EarthThreeJS | 交互式三维地球（Three.js + React + GLSL） |
| BookcaseThreeJS | 10 | https://github.com/achrefelouafi/BookcaseThreeJS | 程序化书架生成 |
| NameWriterThreeJS | 6 | https://github.com/achrefelouafi/NameWriterThreeJS | 3D 文字书写效果 |
| MilkyWayThreeJS | 2 | https://github.com/achrefelouafi/MilkyWayThreeJS | 银河星空渲染 |
| PoleGeneratorThreeJS | 1 | https://github.com/achrefelouafi/PoleGeneratorThreeJS | 电线杆生成器，街景细节利器 |
可以看出作者的技术路线很清晰，用程序化生成加粒子系统，在浏览器里还原真实世界。雨、雪、草、海、建筑、植被，把这些项目组合起来，几乎能搭出一个完整的 3D 开放世界场景。
硬核实战背后，前端能学到什么
三、值得前端学习的点
作者的项目大量使用 InstancedMesh 实例化渲染，是学习 Three.js 性能优化的好素材；程序化生成的核心是确定性随机（Seeded RNG），同一种子复现同一结果，调试和分享都方便；从 Blender 几何节点到 TypeScript 算法的移植思路，也打通了 DCC 工具和前端渲染之间的壁垒；更值得注意的是参数化设计思维，把复杂效果拆解成十几个可调参数，用 lil-gui 暴露出来，交互体验和可玩性都上了一个台阶。
一个值得收藏的 Three.js 案例库
结语
这位作者的仓库质量普遍很高，代码结构清晰，依赖简单，大多只有 three 和 vite，克隆下来 npm install && npm run dev 就能跑，很适合作为 Three.js 进阶学习的案例库。
建议收藏关注：https://github.com/achrefelouafi
如果这篇文章对你有帮助，欢迎点赞、在看、转发三连，关注「柳杉前端」。
一句话总结
这位作者用 three + vite 把建筑、海洋、雨雪等硬核效果做成一个个可跑的 Three.js 案例库，是前端进阶图形学的优质练习素材。
延伸思考
程序化生成 + 参数化 GUI 的思路，正在把“美术效果”变成“可调的工程”。前端离专业图形与 DCC 工具的壁垒，越来越薄。
参考资料
-
- 原文：《建筑、海洋、暴雨、飞雪，这些 Three.js 效果真的太牛了》@柳杉前端
- https://mp.weixin.qq.com/s/NWxFjMJkMgnf-Fu2c_AHng
