用 Claude Opus 5.5 与 Three.js 纯代码构建 3D 寺庙场景的项目解析

原创 前端设计大神 2026-10-17 12:00 北京

Opus5.5实现的精美3D建筑动画

前两天刚惊叹完《小王子》的3D场景，今天看到国外一个大神通过Opus5.5+Threejs完成了一个非常漂亮的建筑场景。

代码地址：

https://github.com/Leonxlnx/golden-temple

场景：

所看到的一切都是代码。不包含任何 3D 模型、纹理文件、HDR 图像或图片资源。建筑物、屋顶瓦片、支架、金饰、雕像、树木、莲花、锦鲤、水、地形、云朵和天空都是在页面加载时由 JavaScript 生成的，所有表面都是通过注入到 three.js 基于物理的材质中的程序化 GLSL 代码生成的。场景中使用的少量纹理，例如树叶图集和地形遮罩，都是在加载时计算或绘制到画布上的。

• 大约 31,000 行 JavaScript 代码构建了一个包含 2440 万个三角形的场景。
• 世界是确定性的。每一个随机选择都来自一个预先设定的生成器，因此每次加载都会构建完全相同的场景。
• 影片由10个镜头组成，每个镜头持续7秒。每个镜头都以一个细节丰富的物体的微距特写镜头开始，然后拉远镜头展现周围的场景。
• 影片每一帧由8个子帧平均而成，从而实现抗锯齿、运动模糊、柔和的阳光阴影和无噪点的环境光遮蔽效果。

剧照：

镜头：

工作原理：

• 引擎 （src/core/）
• sky.js：基于物理的天空，具有单次散射的瑞利散射、米氏散射和臭氧，穿过大气层的云层，以及 HDR 太阳圆盘。
• fog.js：空气透视和高度雾效，已写入每个材质的着色器中，使水面反射呈现相同的雾气效果。此外，它还添加了环境光遮蔽体积，这些体积会降低大厅内部和深屋檐下的天空光线亮度。
• lighting.js：一个太阳，带有 8192² 的阴影贴图。阴影截锥体围绕每个拍摄对象进行拟合，图像中的光线先从天空捕捉，然后从建筑场景中捕捉。
• post.js子帧累积管线。每个子帧都使用 4 倍 MSAA 和 SSAO 渲染 HDR 场景，并将其以高斯权重添加到累积缓冲区中。在子帧之间，摄像机、太阳和快门时间都会进行抖动，从而产生抗锯齿、柔和阴影和运动模糊。每个完成的帧随后都会添加景深、光晕、ACES 和 AgX 色调映射的混合、色彩分级、暗角和颗粒。该管线还包含一个体积光通道，用于对太阳阴影贴图进行光线步进。大厅内的光束是来自内部模块的阴影映射切片。
• materials.js：patch()，它将 GLSL hooks（颜色、粗糙度、法线、自发光、光照、风）注入到 three.js 的标准和物理材料以及共享的程序库中：朱砂漆、金箔、青铜、屋顶瓦、石膏、长满苔藓的花岗岩和木材。
• rng.js：每个模块都使用的带种子随机数生成器，而不是Math.random。
• 世界（src/world/）：九个模块，每个模块都有一项build(ctx)功能：地形、池塘、大厅、室内、宝塔、桥梁、建筑物、道具和植被。src/layout.js是共享场地平面图。
• 镜头（src/shots.js）：每个镜头对应一个相机键（焦距、对焦距离、光圈）。方向通过插值计算，缓动曲线会在特写镜头上停留一段时间，可选的高斯平滑功能可以消除手动设置键的抖动。每个模块都可以覆盖其自身主镜头的相机设置src/shotkeys/<module>.js。
• 工具（tools/）：camcheck.mjs报告每个镜头的相机速度、转弯速率和加速度峰值。lumaflicker.mjs测量每个屏幕区域的帧间亮度闪烁。mcflicker.mjs测量运动补偿闪烁。splice.mjs替换成品影片中重新渲染的帧范围。

制作方法：

Claude Opus 5.5 控制着一组并行代理。每个代理负责一个世界模块，并且对于大多数模块来说，还拥有其主镜头的摄像机控制权。所有代理共享同一个场地平面图src/layout.js和同一个引擎src/core/。代理通过无头 Chrome 在 GPU 上渲染其工作成果的静态图像，并将其与参考图像进行比较，然后根据结果进行迭代。在tools/最终渲染之前，使用工具测量了摄像机的运动和时间稳定性。参考图像不包含在此代码库中。

收集大约 10 张图片，并将它们作为参考导入 Opus。

提示词：

使用 Three.js 构建一个 3D 环境，并渲染一段流畅清晰的 1 分钟电影级视频。视频包含 10 个精彩的镜头，每个镜头 7 秒，每个镜头都从特写镜头开始，然后逐渐拉远展现场景。请在黄金时段拍摄。尽可能让画面看起来逼真，并着重处理光影。尽可能地还原参考图片，反复迭代直到达到 99.9% 的还原度。所有内容都必须是代码，不能使用任何素材。唯一的例外是背景音乐：在网上找一首免费的电影级配乐，不要自己创作。在细节上投入大量精力，比你想象的要多花两倍的功夫。这包括地板和地面，从上方俯视也要看起来不错。光影必须干净利落，不能有任何闪烁，验证并迭代。不断改进，直到它真正接近参考对象，在此之前不要停止，即使需要花费数天时间。

预告

非常好的实现思路，下一篇分享一下用这个思路实现的家乡山西平遥古城的宏大场景，下面是第一版，目前正在跟真实照片比对中，明天发体验链接😄

关于作者

做一只爬的最久的乌龟，保持学习保持好奇，即使慢一点，遇到一点困难，只要最后能到达终点，又有什么关系呢。

毕竟人生没有白走的路，每一步都算数。

跳转微信打开