Black Hole Flyby：电影级黑洞互动网站

这是一个小型网站案例，不是完整产品。

它适合用来测试 AI 能不能同时处理 WebGL 实时渲染、物理视觉、连续镜头、声音、响应式交互和实际运行验收。最终结果应该是一个可以直接打开体验的独立网站，而不是一张黑洞效果图。

EXPERIENCE

先体验 Black Hole Flyby

先观察黑洞、吸积盘、镜头和控制方式，再决定哪些体验要保留。

BUILD

用 Kimi K3 开始制作

把下面的完整提示词交给 K3，让它直接生成、运行并检查网站。

优先使用 Kimi K3

这份提示词同时要求视觉理解、WebGL / GLSL、长链路编码和跨端验收，建议直接使用 Kimi K3。其他模型也可以尝试，但通常需要拆分任务并进行更多轮修正，最终视觉完成度也可能更低。

这个案例练什么

能力	具体要求
实时视觉	引力透镜、事件视界、光子环、旋转吸积盘和受扭曲星空
镜头叙事	五幕连续旅程，不靠替换文案假装章节切换
物理表现	测地线绕飞、逃逸、时间膨胀、多普勒增亮和颜色偏移
产品交互	故事模式、自由探索、自动播放、沉浸模式和实时数据
工程收口	中英文、键盘与触控、ARIA、reduced-motion、降级和构建验证

这个案例最难的地方，不是画出一个黑色圆球，而是让同一套吸积盘通过弯曲光路形成正面亮带和上下弧光，同时让镜头、轨道、速度、曝光与章节连续变化。

可直接使用的完整提示词

请从零创建一个可部署的独立单页网站「Black Hole Flyby」，使用 React + TypeScript + Vite，主画面采用 WebGL2/Three.js 或 GLSL 实时渲染。直接完成全部代码、资源、响应式设计和运行验证，不要只给方案或静态效果图。

目标是做出接近《星际穿越》黑洞观感的电影级互动体验，但不要复制电影素材。黑洞不能只是“黑球加土星环”：必须表现引力透镜、事件视界、光子环、旋转吸积盘、多普勒增亮与颜色偏移。横向亮带是吸积盘正面，上下半圆应由同一吸积盘背面的光被黑洞引力弯折形成；盘没有弯，弯的是光路。背景使用受引力扭曲的星空，整体采用克制的深黑、炽白、琥珀与蓝移高光，避免廉价霓虹、粒子背景和密集 HUD。

设计一段可手动推进或自动播放的五幕旅程：

1. 远景观察竖起的吸积盘光环；
2. 靠近，看清盘面背面如何翻到黑洞上下方；
3. 黑洞逐渐占据半个视野，显露细薄光子环；
4. 沿数值计算的测地线轨道俯冲至约 4.8 个事件视界半径，绕飞一整圈后改变方向、逃回深空；
5. 切换到自由落体，展示接近视界时的时间膨胀。

章节切换必须连续驱动镜头、轨道、速度、曝光和画面变化，不能只替换文字。提供“故事模式”和“自由探索”：用户可以拖拽旋转视角、滚轮或双指缩放、切换五幕、运行/暂停，并实时查看距离、速度（c）和时间膨胀倍数。增加自动播放、隐藏全部界面的沉浸模式，以及在用户主动点击后才开启、随飞行速度渐强的环境配乐；默认静音。

界面使用简洁的电影字幕轨和可收起控制坞，不遮挡黑洞。支持桌面与手机触控、中英文切换、键盘操作、ARIA、reduced-motion、加载进度和 WebGL 不可用时的优雅降级。优先采用 Eric Bruneton Black Hole Shader（BSD-3-Clause）等可靠开源实现并保留许可证与来源；若做模型简化，需要在“关于模型”中说明。

最终交付完整可运行项目、README、安装与构建命令。实际启动网站并检查桌面和手机布局、控制台错误、首屏加载、全部五幕、暂停/恢复、中英文、沉浸模式及轨道能否绕飞后逃逸；确认构建成功后再报告完成。

使用时不要省掉验收

K3 第一轮生成后，先实际打开网站，不要只看它回复“已经完成”。重点检查这几件事：

黑洞是否真的有引力透镜和上下弧光，而不是黑球外套了一圈发光圆环。
五幕是否连续改变镜头、轨道和曝光，而不是只切换字幕。
第四幕是否完成一次完整绕飞，并且最后真的改变方向逃逸。
手机端能否拖拽、双指缩放和展开控制坞，界面是否挡住黑洞。
暂停、恢复、中英文、沉浸模式和默认静音是否都能正常工作。
控制台是否没有错误，生产构建是否成功。

如果第一版只是视觉 Demo，继续把反馈写成可观察的结果。比如不要只说“更像电影”，而要指出“吸积盘背面没有被弯折到黑洞上方”“第四幕没有绕满一圈”或“手机控制坞挡住了事件视界”。

模型与许可参考

Kimi Websites：使用 Kimi K3 从自然语言生成并部署网站。
Eric Bruneton Black Hole Shader：可参考其实时黑洞渲染方法、演示与源码，并按项目要求保留 BSD-3-Clause 许可证和来源。

这个案例的目标不是一次生成一张漂亮截图，而是把一个视觉概念收口成能操作、能验证、能部署的小网站。