空间隧道 3D 互动网页

滚动驱动的空间叙事网站:3D 空间站显影开场,黑洞引力场背景下穿越理论章节,进入隧道飞行影片,最后以字幕收尾。可打开交互预览查看模型与操作细节,并复用原始提示词制作和修改自己的版本。由 Kimi K3.1 Pro 生成。

正在加载预览…
从这段提示词开始

滚动驱动的空间叙事网站:3D 空间站显影开场,黑洞引力场背景下穿越理论章节,进入隧道飞行影片,最后以字幕收尾。

试用 3D Make
制作一个滚动驱动的空间叙事 3D 网页,纯黑背景、电影感排版。

向下滚动进入 3D 场景:一座细节丰富的银灰色环形空间站模型在巨大黑洞吸积盘背景前缓慢旋转,线框显影动画 + 辉光后期效果,鼠标移动可惯性旋转视角。继续滚动进入理论章节,文字逐词瀑布式入场并带视差;随后进入影院段落:全屏播放一段 第一人称隧道飞行影片,播放期间滚动被钳制,画面对比度采样生成点线交互效果;影片结束后衔接尾声过场与字幕,以一句引用收尾。

使用 Vite + Three.js(GLTFLoader、EffectComposer、UnrealBloomPass)实现。

本视频主模型为 re1monsen 创作的 3D 模型《Space Station 4》,来源于 Sketchfab,依据 CC BY 4.0 许可使用。二次改造、材质、灯光、运镜、隧道场景等为 K3 创造。
增加移动端触控

补充手机触控与布局,其余要求不变。

试用 3D Make
制作一个滚动驱动的空间叙事 3D 网页,纯黑背景、电影感排版。

向下滚动进入 3D 场景:一座细节丰富的银灰色环形空间站模型在巨大黑洞吸积盘背景前缓慢旋转,线框显影动画 + 辉光后期效果,鼠标移动可惯性旋转视角。继续滚动进入理论章节,文字逐词瀑布式入场并带视差;随后进入影院段落:全屏播放一段 第一人称隧道飞行影片,播放期间滚动被钳制,画面对比度采样生成点线交互效果;影片结束后衔接尾声过场与字幕,以一句引用收尾。

使用 Vite + Three.js(GLTFLoader、EffectComposer、UnrealBloomPass)实现。

本视频主模型为 re1monsen 创作的 3D 模型《Space Station 4》,来源于 Sketchfab,依据 CC BY 4.0 许可使用。二次改造、材质、灯光、运镜、隧道场景等为 K3 创造。
调整整体配色

改为深色与暖色高亮,保留其他要求。

试用 3D Make
制作一个滚动驱动的空间叙事 3D 网页,纯黑背景、电影感排版。

向下滚动进入 3D 场景:一座细节丰富的银灰色环形空间站模型在巨大黑洞吸积盘背景前缓慢旋转,线框显影动画 + 辉光后期效果,鼠标移动可惯性旋转视角。继续滚动进入理论章节,文字逐词瀑布式入场并带视差;随后进入影院段落:全屏播放一段 第一人称隧道飞行影片,播放期间滚动被钳制,画面对比度采样生成点线交互效果;影片结束后衔接尾声过场与字幕,以一句引用收尾。

使用 Vite + Three.js(GLTFLoader、EffectComposer、UnrealBloomPass)实现。

本视频主模型为 re1monsen 创作的 3D 模型《Space Station 4》,来源于 Sketchfab,依据 CC BY 4.0 许可使用。二次改造、材质、灯光、运镜、隧道场景等为 K3 创造。