Sci-fi 3D Image Gallery
A 3D image gallery built with Next.js, Three.js, and React Three Fiber.
Christian Ortiz
Video
Three.js Marketplace
Three.js Marketplace
Kickstart your Three.js and React Three Fiber (R3F) projects with our free and premium components themes and tools. Designed for freelancers, developers, and agencies, each product includes essential features to get you up and running quickly.
Links
Featured Badge
Add this badge to your website to show you are featured on Three.js Resources.
Description
A 3D cylindrical image gallery built with Next.js, Three.js, and React Three Fiber.
Images are displayed on a scroll-driven spiral cylinder with custom GLSL shaders, dithering effects, and post-processing.
Features
- Cylindrical Spiral Gallery — Images arranged in a helix around a 3D cylinder, driven by scroll input
- Custom GLSL Shaders — Per-instance rendering with dithering, chromatic aberration, scan lines, flicker, and distance fade
- Scroll Physics — Momentum-based scrolling with configurable friction, velocity, and rotation smoothing
- Post-Processing — Bloom with adjustable intensity, threshold, smoothing, and radius
- Wireframe Shape — Decorative 3D wireframe shape (Torus, TorusKnot, Cube) centered in the gallery, reacting to scroll
- Visual Presets — Switchable presets (Default, Green SCIFI) that update bloom, border, and dither settings via Leva
- Live Controls — Full Leva GUI for tweaking all parameters in real time (gallery, motion, effects, border, corners, dither, torus, bloom)
- Texture Atlas — Images packed into a single atlas texture for efficient GPU rendering
Tech Stack
- Framework: Next.js 13.5 (App Router)
- 3D/WebGL: Three.js, React Three Fiber, React Three Drei
- Post-Processing: React Three Postprocessing
- Animation: GSAP
- Controls: Leva (GUI controls)
- Styling: Tailwind CSS, SCSS Modules
