用 AI 生成 Three.js 沉浸式网站，代码与 Skill 均已开源

一个单文件 HTML，全程序化生成，零外部资源，打开即看。

GitHub地址 github.com/zsj23333/df...

在线体验 zsj23333.github.io/dfmz/

AI 生成的沉浸式滚动体验

通过大模型生成的东方明珠主题沉浸式网站，滚动页面，镜头像电影一样缓缓推进------从江面驶向东方明珠，再穿过陆家嘴，最后回望外滩。

6 个章节，6 个机位，一次完整的浦江夜航。

Hero：从江面缓缓驶向东方明珠
The Pearl：近距离仰望明珠
The Skyline：飞越陆家嘴三件套
The Bund：远眺外滩
Afterglow：高空俯瞰
Footer：缓缓远去

相机路径使用 Catmull-Rom 样条插值，滚动时平滑过渡，像电影镜头一样流畅。

全程序化生成，零外部资源

整个网站只有一个 index.html（约 109KB），没有一张图片，没有一段视频，没有一个外部依赖。

所有纹理、模型、灯光都是用代码实时生成的：

天空：Canvas 2D 生成渐变 + 星星
水面：Canvas 2D 生成波纹 + 反射
建筑：Three.js 几何体 + 程序化纹理
灯光：点光源 + 后期处理

电影级后期处理

后期处理管线包含：

Bloom：4 级高斯模糊，让灯光发光
曝光：模拟相机曝光
色温：冷暖色调分离
暗角：聚焦视线
噪点：增加胶片质感

最终效果接近电影级画质。

交互式 UI

预加载器：显示加载进度
导航栏：固定顶部，下滑隐藏
章节卡片：3 张卡片，悬停显示实时 3D 预览
进度条：右侧固定，显示当前位置
自定义光标：跟随鼠标的光点

内置 Skill，AI 一键生成任意主题

项目内置了一个 skill 目录，包含完整的模板和文档，可以通过大模型生成任意主题的沉浸式站点：

bash 复制代码

# 复制模板
cp -r skill/assets/template/ my-site/

# 告诉大模型你的主题
# 例如："帮我生成一个鸟巢主题的沉浸式网站"
# 大模型会自动修改文案、配色、场景构建函数、相机路径

技术栈

Three.js：WebGL 渲染
GLSL：自定义着色器
Canvas 2D：程序化纹理
IntersectionObserver：滚动触发动画
CSS：响应式布局

项目结构

python 复制代码

dfmz/
├── index.html          # 主文件（约 109KB）
├── runtime/
│   ├── three.min.js    # Three.js 库
│   └── fonts.css       # 字体
├── preview/            # 截图
├── skill/              # 模板和文档
│   ├── SKILL.md       # 使用指南
│   ├── assets/
│   │   └── template/   # 完整模板
│   └── references/    # 设计指南
├── README.md           # 项目说明
├── PROMPT.md           # 构建提示词
└── PROMPT.template.md  # 通用模板