从动漫水面到赛博飞船：这位开发者的Three.js作品太惊艳了

柳杉
0 阅读4分钟

不是游戏引擎做不起，而是 React Three Fiber更有性价比。

今天给大家安利一个宝藏开发者 Christian Ortiz，以及他的两个开源项目——看完你会明白，用Web技术做3D视觉效果，已经卷到什么程度了。

项目一：Anime Water Scene —— 动漫风格水面场景

GitHub: github.com/cortiz2894/…

先看效果：

  • 类似《海贼王》《鬼灭之刃》那种手绘风格的动漫水面
  • 物体入水时有经典的动漫式涟漪圆环
  • 水下有随水流波动的Voronoi纹理海底
  • 水面与物体交界处有发光轮廓线

技术亮点拆解：

1. 多层渲染管线（6层叠加）

SeabedFloor（海底纹理）
  ↓
WaterFloor（水面着色）
  ↓
WaterDepthIntersection（深度发光）
  ↓
WaterWaveSimulation（波浪模拟）
  ↓
WaterSparkles（水面闪光粒子）
  ↓
Ripple System（涟漪系统）

这不是简单的"贴图+水面"，而是真正的分层合成渲染。

2. 自定义GLSL着色器 —— 核心黑科技

Voronoi Cel-Shading（赛璐珞着色）

// 简化版核心逻辑
float voronoi = voronoiF1(pos) - smoothVoronoiF1(pos);
vec3 waterColor = mix(deepColor, highlightColor, voronoi);

用 Voronoi F1 − SmoothF1 算法，复刻了Blender的动态绘画效果，实现了那种"一块一块"的动漫水面质感。

3. GPU物理波浪模拟（PDE方程）

不是简单的正弦波，而是真正的偏微分方程 模拟：

h_next = 2·h_cur − h_prev + c²·∇²h

每帧三次渲染通道：

  1. Injection —— 检测物体入水形状
  2. Wave Update —— 求解波浪方程（ping-pong双缓冲）
  3. Display —— 根据高度梯度渲染波纹

4. 屏幕空间深度检测

物体与水面交界处的效果，用深度图比较实现：

  • 渲染一遍场景深度到纹理
  • 水面像素对比自身深度和场景深度
  • 差值越小 → 发光越强

这技术在各种3A游戏里都在用，现在Web端也能跑了。

项目二：Ship Selection Page —— 赛博飞船选择界面

GitHub: github.com/cortiz2894/…

这是游戏《Laser Drift: Neon Blast》的飞船选择界面，有完整的YouTube教程系列。

核心效果：

截屏2026-03-20 19.44.22.png

截屏2026-03-20 19.45.36.png

  • 蒸汽波（Vaporwave）美学风格
  • 飞船线框揭示动画（Wireframe Reveal）
  • 3D飞船展示 + 属性面板
  • 粒子背景系统
  • 手势控制支持

技术亮点：

1. 线框揭示动画（Wireframe Reveal）

不是简单的淡入淡出，而是从线框到实体的渐变：

  • 先用GLSL把模型渲染成线框
  • 通过shader的discard逻辑，控制像素显示/隐藏
  • 配合GSAP动画，实现"绘制出来"的效果

2. GLB模型烘焙纹理

  • 从Blender导出GLB格式
  • 烘焙光照贴图（Lightmap）
  • 在Web端还原高质量的静态光照

3. 完整的UI+3D融合

ShipSelection/
├── BaseModel/      # 3D展示平台
├── Ships/          # 飞船模型数据
├── ShipGrid/       # 选择网格UI
├── ShipStats/      # 属性面板
└── ShipDescription/# 描述面板

3D场景和React UI组件完美融合，不是"3D画布上面盖一层HTML"的简单做法。

两个项目的共同技术栈

技术用途学习价值
Next.js 15框架App Router + 服务端渲染
React Three Fiber3D渲染React式声明化3D开发
DreiR3F辅助库常用3D组件开箱即用
GSAP动画时间轴控制、缓动函数
LevaGUI调试实时参数调节
Tailwind CSS样式快速UI开发
TypeScript类型大型3D项目必备

你可以从中学到什么？

1. 动漫风格渲染的秘密

  • Cel-Shading（赛璐珞着色）不是"卡通材质"那么简单
  • Voronoi噪声可以实现手绘质感的纹理
  • 多层合成比单一大shader更可控

2. 物理模拟不用全靠库

  • 自己写PDE求解器，理解GPU计算的本质
  • Ping-pong双缓冲是实现反馈效果的关键
  • WebGL的FrameBuffer对象可以玩出很多花样

3. 3D项目工程化

  • 用React组件化思维组织3D代码
  • Store模式管理跨组件的3D状态
  • 自定义Hook封装可复用的3D逻辑

4. 性能优化技巧

  • DPR-aware渲染（适配高分辨率屏）
  • GPU粒子系统（gl_PointCoord）
  • 深度图复用（避免重复渲染）

如何运行这两个项目

# 项目一：动漫水面
git clone https://github.com/cortiz2894/water-anime-shader.git
cd water-anime-shader
pnpm install
pnpm dev

# 项目二：飞船选择
git clone https://github.com/cortiz2894/ship-selection-page.git
cd ship-selection-page
npm install
npm run dev

注意：都需要Node 18+，推荐用pnpm（项目一作者用的pnpm）。

适合谁学？

人群建议重点看
前端开发者React Three Fiber的组件化思维
Three.js初学者两个项目的shader入门
创意开发者视觉效果实现思路
游戏开发者UI与3D场景融合方案
设计师技术可行性参考

写在最后

Christian Ortiz 的作品最打动我的地方：他把Blender的动态绘画、3A游戏的深度检测、物理模拟的 PDE 方程，全部搬进了Web端。

而且代码组织得非常干净——不是那种"shader写2000行"的硬核风格，而是组件化、模块化、React化的现代前端工程实践。

如果你想：

  • 做创意视觉网站
  • 做游戏风格的3D交互
  • 深入理解WebGL shader
  • 看如何用React做3D工程

这两个项目都值得clone下来，一行行啃。

项目链接：

如果对你有帮助，点个关注呗！

avatar
文章
阅读
粉丝