开发者开源 AI 生成的 Three.js 沉浸式网站，仅 109KB

开发者公开了一个使用 AI 生成的 Three.js 沉浸式网站，该网站仅有一个 109KB 的单文件 HTML，无需任何外部资源即可运行。用户可以通过滚动页面体验从江面驶向东方明珠、穿过陆家嘴到回望外滩的完整旅程。

该网站通过大模型生成了一个东方明珠主题的沉浸式体验，用户可以通过滚动页面，像电影镜头一样缓缓推进，体验从江面驶向东方明珠，再穿过陆家嘴，最后回望外滩的全过程。整个体验分为 6 个章节，每个章节都有不同的机位，包括从江面驶向东方明珠、近距离仰望明珠、飞越陆家嘴三件套、远眺外滩、高空俯瞰以及缓缓远去。相机路径使用 Catmull-Rom 样条插值，确保滚动时平滑过渡，如同电影镜头一般流畅。

整个网站只有一个 index.html 文件（约 109KB），没有任何图片、视频或外部依赖。所有的纹理、模型和灯光都是用代码实时生成的。天空通过 Canvas 2D 生成渐变和星星，水面则生成波纹和反射。建筑使用 Three.js 几何体加上程序化纹理，灯光则是点光源加上后期处理。后期处理管线包括 Bloom（4 级高斯模糊）、曝光、色温调整、暗角效果和噪点增加，最终效果接近电影级画质。此外，网站还提供了交互式 UI，包括预加载器、导航栏、章节卡片、进度条和自定义光标等。

项目内置了一个 skill 目录，包含完整的模板和文档，用户可以通过大模型生成任意主题的沉浸式站点。具体步骤是复制模板目录，然后告诉大模型所需的主题，例如“帮我生成一个鸟巢主题的沉浸式网站”，大模型会自动修改文案、配色、场景构建函数和相机路径。该项目的技术栈包括 Three.js 用于 WebGL 渲染，GLSL 用于自定义着色器，Canvas 2D 用于程序化纹理，IntersectionObserver 用于滚动触发动画，CSS 用于响应式布局。项目结构清晰，包含了主文件、库文件、截图、模板和文档等。