AI 自主选题，竟做出迈凯伦塞纳 3D 超跑官网

最近在 GitHub 上看到一个挺有意思的 Three.js 项目。

打开网页，首先映入眼帘的是一辆 McLaren Senna（迈凯伦塞纳）超跑。黑色碳纤维车身、橙色涂装、复杂的空气动力学结构，再配合暗色调的工业风界面，整体看起来很有汽车品牌官网的感觉。

但这个项目真正有意思的地方，并不是它展示了一辆 3D 超跑。

而是整个网站几乎都是 AI 写出来的。

作者使用 Google Antigravity，搭配 Gemini 4 Argon，让 AI 自己选择主题、设计页面、编写 Three.js 代码，最终做出了这个名为 Senna 800KG 的交互式 3D 官网。

更有意思的是，作者最初甚至没有告诉 AI 要做一辆汽车。

今天就来看看这个项目。

一、先看看最终效果

项目名称：Senna 800KG。

GitHub 地址：

https://github.com/Sam1983Aing/senna-800kg

在线预览：

https://sam1983aing.github.io/senna-800kg/

它不是一个简单的 3D 模型展示页面，而是围绕一辆 McLaren Senna 超跑打造的沉浸式交互体验。

整个页面采用电影式滚动叙事的方式，将展示内容分成六个阶段。

随着鼠标滚轮向下滚动，镜头会沿着预先设计好的 3D 路径移动，从车头、车身到尾翼，逐步展示汽车的不同细节。

整个过程不是简单地切换页面，而是让 3D 场景中的摄像机持续运动。

几个有意思的交互：

1. 沿着汽车进行 3D 镜头漫游

页面将滚动进度映射到摄像机运动路径。

向下滚动，镜头就会逐渐靠近汽车的不同部位，形成类似汽车广告片的视觉体验。

2. 空气动力学可视化

汽车周围有大量流线效果，随着风速变化，气流线也会产生相应的变化。

还可以切换不同的空气动力学模式，观察不同状态下的视觉效果。

3. X-Ray 透视模式

按下键盘 X，可以切换汽车的 X-Ray 视图。

原本完整的汽车模型会呈现出类似透视拆解的效果，并展示内部结构标签。

4. V8 发动机音效

进入发动机展示阶段，按住空格键，就能听到模拟的 V8 发动机轰鸣声。

这里没有使用预先录制的音频文件，而是通过 Web Audio API 实时合成声音。

5. 自定义汽车涂装

页面还提供了一个简单的汽车配置工作室，可以选择不同的车身涂装和刹车卡钳颜色。

从 3D 展示到交互配置，已经有点接近一个完整的汽车品牌营销页面了。

二、这个项目是怎么实现的？

从源码来看，项目采用的技术栈非常直接：

• Three.js：负责 3D 场景、模型加载和渲染。
• TypeScript：编写交互和场景逻辑。
• Vite：负责开发和构建。
• Web Audio API：生成发动机和涡轮声音。

依赖并不复杂，核心只有 Three.js。

项目比较值得关注的是它对不同功能的拆分。

1. 基于滚动进度控制摄像机

对应源码：

src/three/cameraSpline.ts

这是整个页面沉浸式体验的关键。

传统的网页滚动通常是控制 DOM 元素的位置、透明度或者尺寸。

但在这个项目中，滚动进度实际上控制的是 3D 摄像机的位置和观察方向。

作者设计了一条摄像机运动路径，将页面划分为六个展示阶段。

当用户滚动页面时，程序根据当前滚动进度计算摄像机在路径上的位置，从而实现连续的镜头运动。

这种实现方式很适合产品展示、汽车官网、数字展厅等场景。

相比于每个区域单独放置一个 3D 模型，让摄像机沿着一条连续路径运动，整体叙事会更加自然。

2. 根据汽车轮廓生成气流线

对应源码：

src/three/cfdStreamlines.ts

这个功能也是我比较感兴趣的地方。

作者绘制了 56 条气流线，用来表现空气经过汽车车身时的流动效果。

它并不是简单地使用几条固定的曲线。

项目会从汽车模型上方进行射线检测（Raycasting），采样汽车的实际轮廓，再根据采样结果调整气流线的弯曲路径。

这样一来，气流线就能更贴合当前汽车模型的外形。

当用户调整风速时，气流线也会产生相应的视觉变化。

当然，这里需要说明一下：它属于基于模型轮廓生成的视觉效果，并不是真正的 CFD（计算流体力学）仿真。

如果只是用于网页中的汽车展示，这种方式已经能够提供不错的视觉表现，同时避免引入复杂的流体计算。

3. 汽车模型的材质与涂装

对应源码：

src/three/sennaCar.ts

汽车模型是整个项目的视觉核心。

作者使用 Three.js 加载汽车模型，并对车漆和刹车盘等部位进行了额外处理。

其中包括：

• 通过 Clearcoat 增强车漆表面的清漆质感。
• 根据车辆速度调整刹车盘的发光效果。
• 支持不同车身涂装的切换。

对于汽车这类高反光产品，材质表现非常重要。

同样一个模型，普通材质和具有清漆层效果的材质，最终呈现出来的视觉差异会非常明显。

4. 不依赖 HDRI 的环境反射

对应源码：

src/three/studioEnv.ts

汽车展示页面通常需要比较复杂的环境反射，才能体现车漆的质感。

这个项目没有直接依赖 HDRI 环境贴图，而是通过代码生成工作室环境反射。

这样可以减少对外部环境贴图资源的依赖，也让整个展示场景更加独立。

5. 使用 Web Audio API 合成发动机声音

对应源码：

src/audio/v8Audio.ts

前面提到，按住空格键就能让发动机发出轰鸣声。

这部分并没有加载 MP3 或 WAV 音频文件，而是使用 Web Audio API 实时合成发动机和涡轮声音。

这种做法比较适合需要根据用户操作动态变化的交互场景。

例如，后续可以根据转速、油门开度等参数，调整声音的频率和强度。

三、这个项目最值得关注的，其实是 AI 的开发过程

如果只是看最终效果，可能会觉得这是一个比较成熟的 Three.js 作品。

但我认为，更值得开发者关注的是作者如何让 AI 完成整个项目。

作者在 PROMPT.md 中公开了最初使用的提示词。

整个过程有一个很有意思的细节：

作者没有指定具体的网页主题。

他只是要求 AI 在五个独立会话中，分别创建五种不同创意方向的 Landing Page。

例如：

• 产品拆解展示。
• 未来科技风格。
• 艺术化设计。
• 梦幻视觉体验。
• 电影式滚动与 3D 场景。

同时还提出了一些设计要求：

• 不要使用千篇一律的 AI 模板。
• 不要每个页面都使用相同的配色和字体。
• 默认不要使用衬线字体。
• 页面需要有真实产品展示的感觉。
• 每个方案都要尽可能达到较高的视觉完成度。

随后，AI 自己选择了汽车作为其中一个主题。

它从作者之前的项目中找到了 McLaren Senna 模型，并围绕这辆汽车构建了整个网站。

整个项目大约使用了 1 小时完成五个页面的初始版本。

作者还让 AI 使用无头 Chrome 对自己生成的页面进行截图、评分，然后继续迭代。

这实际上形成了一个简单的 AI 自我评估流程：

生成页面 → 浏览器截图 → 视觉评估 → 再次修改。

当然，作者也在 README 中说明，这只是第一轮迭代，并没有对最终代码进行进一步打磨。

四、写在最后

我觉得 Senna 800KG 是一个值得收藏的 Three.js 案例。

它有意思的地方，不在于使用了多少复杂的 3D 技术，而在于把滚动叙事、3D 模型展示、材质控制、气流视觉效果和声音交互组合在了一个完整的网页里。

对于平时做 Three.js、WebGL、数字孪生和大屏可视化的开发者来说，也有一些可以借鉴的地方。

尤其是摄像机路径控制、模型轮廓采样、材质动态调整这些实现思路，都可以迁移到自己的项目中。

另外，这个项目还公开了最初的 AI 提示词。

如果你也在使用 AI Coding 开发 Three.js 项目，不妨把它的 PROMPT.md 下载下来，看看如何让 AI 从一个开放式需求开始，逐步完成一个完整的 3D 网页。