Space Tunnel Interactive 3D Scene

A silver ring station rotates above a black-hole backdrop as scrolling reveals its wireframe. Theory chapters and a tunnel-flight film lead into the end credits. Generated by Kimi K3.1 Pro.

Try 3D Make View membership plan

Loading preview...

Start from this prompt

A silver ring space station above a black-hole backdrop in a scroll-driven spatial narrative.

Try 3D Make

Build a scroll-driven spatial narrative 3D webpage with a pure black background and cinematic typography.

Scrolling down enters the 3D scene: a richly detailed silver-gray ring-shaped space station model slowly rotates against the backdrop of a massive black hole accretion disk, featuring a wireframe reveal animation plus glow post-processing; mouse movement rotates the camera with inertia. Continuing to scroll enters the theory chapter, where text cascades in word by word with parallax. Next comes the cinema section: a first-person tunnel-flight film plays fullscreen, during which scrolling is clamped, and the frame's contrast is sampled to generate an interactive dot-and-line effect. After the film ends, it transitions into an epilogue outro with credits, closing with a quote.

Implemented with Vite + Three.js (GLTFLoader, EffectComposer, UnrealBloomPass).

The main model in this video is the 3D model "Space Station 4" by re1monsen, sourced from Sketchfab and used under the CC BY 4.0 license. All modifications, materials, lighting, camera work, and the tunnel scene are created by K3.

Add touch controls

Adds phone controls and layout without changing the other requirements.

Try 3D Make

Build a scroll-driven spatial narrative 3D webpage with a pure black background and cinematic typography.

Scrolling down enters the 3D scene: a richly detailed silver-gray ring-shaped space station model slowly rotates against the backdrop of a massive black hole accretion disk, featuring a wireframe reveal animation plus glow post-processing; mouse movement rotates the camera with inertia. Continuing to scroll enters the theory chapter, where text cascades in word by word with parallax. Next comes the cinema section: a first-person tunnel-flight film plays fullscreen, during which scrolling is clamped, and the frame's contrast is sampled to generate an interactive dot-and-line effect. After the film ends, it transitions into an epilogue outro with credits, closing with a quote.

Implemented with Vite + Three.js (GLTFLoader, EffectComposer, UnrealBloomPass).

The main model in this video is the 3D model "Space Station 4" by re1monsen, sourced from Sketchfab and used under the CC BY 4.0 license. All modifications, materials, lighting, camera work, and the tunnel scene are created by K3.

Try a warmer palette

Changes the palette while preserving the other requirements.

Try 3D Make

Build a scroll-driven spatial narrative 3D webpage with a pure black background and cinematic typography.

Scrolling down enters the 3D scene: a richly detailed silver-gray ring-shaped space station model slowly rotates against the backdrop of a massive black hole accretion disk, featuring a wireframe reveal animation plus glow post-processing; mouse movement rotates the camera with inertia. Continuing to scroll enters the theory chapter, where text cascades in word by word with parallax. Next comes the cinema section: a first-person tunnel-flight film plays fullscreen, during which scrolling is clamped, and the frame's contrast is sampled to generate an interactive dot-and-line effect. After the film ends, it transitions into an epilogue outro with credits, closing with a quote.

Implemented with Vite + Three.js (GLTFLoader, EffectComposer, UnrealBloomPass).

The main model in this video is the 3D model "Space Station 4" by re1monsen, sourced from Sketchfab and used under the CC BY 4.0 license. All modifications, materials, lighting, camera work, and the tunnel scene are created by K3.