不用游戏引擎，Three.js也能做《鬼灭之刃》无限城堡这种质感

你有没有看过《鬼灭之刃》里的无限城堡？那个由鬼舞辻无惨创造的、时刻变换、镜像倒转的恐怖迷宫，算是全剧最震撼的舞台之一。

最近看到一个开源项目，有人用 Three.js（一个 Web 3D 库）完整复现了这个无限城堡——不是贴个模型，而是用代码生成了 700 栋日式建筑、7 场战役场景、还原了镜像翻转的设定。更绝的是，你可以直接在浏览器里 WASD 自由探索，或者坐着看 7 段自动演播的战役重现。

这个项目叫 Infinity Castle，作者是韩国开发者 HongwooKim。

这个项目有什么特别的

700栋建筑，全程跑60帧

无限城堡最难的不是建筑本身，而是数量级。项目包含了超过 700 栋日式建筑，每栋都有多层楼、走廊、房间的完整细节。而且这不是优先级很高的项目，而是在浏览器里跑着，全程 60 帧。

怎么做到的？作者用了一个经典的优化技巧：把数千个静态的建筑网格合并成约 6 个"绘制调用"（理解成一次"批量渲染指令"就行）。换句话说，虽然场景复杂到爆炸，但 GPU 实际处理的工作量被压缩到了最低。

还原了动画里最诡异的设定：镜像倒转

无限城堡有个特别的设定——整个结构是上下倒转的，建筑和天花板对称。这个项目完全还原了这个设定：你往上走就能进到倒转的楼，视觉效果诡异到位。

不只是静态场景

这不是一个"看看建筑"的项目，而是有完整的交互和内容：

  • 7 段战役还原：鸣女的琵琶、炭治郎 vs 赤血鬼、忍柱 vs 堕姬等标志性战役，有自动演播的镜头切换
  • 10 个角色模型：栩栩如生的 3D 人物，比例、服装、神态都很还原动画
  • 3000 个浮动粒子：营造诡异压抑的氛围
  • 12 只监视乌鸦：细节到位

两种探索方式

打开项目之后，你有两种方式体验：

1. 自动演播模式：坐着看 7 段战役场景自动播放，有电影级的镜头切换。适合第一次体验，或者给不懂 3D 的朋友展示。

2. 自由探索模式：用 WASD 按键自己在无限城堡里走，上下楼、穿走廊、找角色。这时候才能体会到"这么复杂的场景我真的在浏览器里自由漫游"的感觉。

技术栈很轻量

这个项目的技术栈出奇的简洁：

部分使用的技术
3D渲染Three.js（Web标准3D库）
开发工具Vite（现代前端打包工具）
音效Web Audio API（完全代码生成，没有预录音文件）
部署Vercel（免费的云平台）

没有 Unreal、没有 Unity，没有任何额外的渲染引擎。一个前端开发者，用 Web 标准 API，做出了游戏级别的效果。这本身就是一个很有说服力的演示。

核心代码思想：怎么从"卡顿"变成"流畅"

如果你拉下来代码，最值得看的是场景优化这一块。这里面有几个关键的设计思想，也是整个项目能跑 60 帧的原因：

1. 网格合并（Geometry Merging）

最直观的做法是：每栋建筑用一个单独的 Three.js Object，700 栋建筑就是 700 个 Object。但这样 GPU 要处理 700 条独立的渲染指令，性能会崩。

Infinity Castle 的做法是：提前把所有静态建筑的网格数据合并成一个大网格。这样 GPU 在每一帧只需要处理 1 条渲染指令，而不是 700 条。

代码层面上，这涉及到 Three.js 的 BufferGeometry 操作——把不同建筑的顶点数据、法线数据、纹理坐标都写入同一个 Geometry 对象。虽然代码复杂，但换来的性能收益是巨大的。

2. 几何实例化（Geometry Instances）

700 栋建筑并不是 700 个完全不同的模型，很多建筑的"基础形状"是一样的，只是位置、旋转、缩放不同。

项目利用这一点，用 Instanced Rendering（实例化渲染）技术：定义一个基础建筑网格，然后通过变换矩阵复制和变形。一个基础网格能被快速复制数十、数百次，不需要重复的网格数据。

这个思想在现代 GPU 渲染中很常见，但在 Web 上用 Three.js 实现并不多见，正是这个项目的巧妙之处。

3. 镜像对称的参数化设计

无限城堡的"上下倒转"设定在代码中是这样实现的：对于每一栋建筑，除了生成正常楼层，还用"负 Y 坐标"自动生成倒转的楼层。这不是手工建模，而是通过参数（如高度、楼层数、走廊宽度）一次性生成。

这种参数化方法的好处是：

  • 代码量很小（几百行参数定义）
  • 易于修改和实验（改一个参数，整个城堡的风格就变）
  • 易于规模化（轻松生成 700 栋各不相同的建筑）

4. 粒子系统和动态效果的控制

3000 个浮动粒子看起来很多，但项目对粒子做了性能控制：

  • 不是 3000 个独立的 Object，而是一个粒子系统（用 Points 或 PointsMaterial）
  • 粒子位置、速度、生命周期都在 GPU Shader 中计算，而不是 CPU
  • 这样做的好处是，GPU 可以并行计算所有粒子，性能远高于 CPU 逐个更新

5. 场景分割和 LOD（细节级别）

700 栋建筑遍布整个场景，如果全部渲染，性能还是会掉。项目使用了视锥剔除（Frustum Culling）——只渲染相机视野内的建筑，视野外的直接跳过。Three.js 内置了这个优化。

对于远处的建筑，项目可能还用了 LOD（Level of Detail） 技术：远处用低面数模型，近处用高面数模型。这也是游戏常用的优化手段。

为什么这些思想对你有用？

如果你要做：

  • 大场景 3D 可视化（城市地图、建筑展示）→ 学习网格合并和 LOD
  • 粒子效果（烟雾、魔法、爆炸）→ 学习 GPU 粒子系统
  • 重复多体场景（植树造林、建筑群）→ 学习实例化渲染

这个项目的代码都是参考案例。

怎么体验和上手

如果你想看看效果，最快的方式是直接打开在线演示：https://infinity-castle-blond.vercel.app (opens in a new tab)

直接在浏览器里运行，不用装任何东西。

如果你想在本地拉代码、修改或学习，步骤也很简单：

git clone https://github.com/HongwooKim/infinity-castle.git
cd infinity-castle
npm install
npm run dev

执行完之后，打开 http://localhost:5173，就能在本地运行项目了。 (opens in a new tab)

如果你是前端开发者，可以看看代码是怎么组织的：

  • 建筑生成的逻辑（如何用参数生成 700 栋各不相同的建筑）
  • 场景优化的细节（怎么把数千个模型合并成 6 个绘制调用）
  • 交互和镜头控制（自动演播和手动控制的实现）

为什么这个项目值得关注

1. 它证明了 Web 3D 的能力上限

很多人还以为"Web 3D 不行，大场景跑不动"。这个项目用事实说话：700 栋建筑、10 个动画角色、3000 粒子效果，还能 60 帧流畅跑。如果你在考虑"我的 3D 项目该用什么技术"，这是个参考案例。

2. 项目代码完全开源

不是看视频炫技，而是可以拉下来研究、修改、学习。对前端开发者来说，看到这样的代码示范，比读再多教程都值钱。

3. 创意和工程的完美结合

这不是在炫耀"我会 Three.js"，而是在用工程方法解决一个有难度的美学问题。900+ 的 GitHub Star，说明很多人觉得这个想法很棒。

写在最后

Infinity Castle 这个项目给我最大的感受，不是"Three.js 也能做游戏级效果"，而是Web 标准 API 在有创意的人手里，能做出什么样的东西。

它不适合实时大型多人游戏（那确实需要专业游戏引擎），但对于场景复杂度高、需要在浏览器里流畅呈现的项目——比如建筑可视化、影视特效展示、品牌互动体验——它证明了现在的 Web 技术足够了。

如果你对 3D 可视化、Web 技术的可能性感兴趣，这个项目绝对值得花 15 分钟体验一下。

GitHub 项目地址：https://github.com/HongwooKim/infinity-castle (opens in a new tab)