Infinite Canvas

An infinite 3D canvas built with React Three Fiber for exploring and displaying media in a seamless, immersive space.

Article on Codrops

Demo

Features

• Infinite 3D space - Navigate through an endless grid of media items
• Performance optimized - Chunk-based rendering with distance-based culling
• Touch & mouse controls - Drag to pan, pinch/scroll to zoom
• Keyboard navigation - WASD to move, QE for up/down
• Progressive loading - Textures load on-demand with progress tracking

Getting Started

npm install
npm run dev

Tech Stack

• React 19
• Three.js
• React Three Fiber
• TypeScript
• Vite

Credits

• Images courtesy of The Art Institute of Chicago

Misc

Follow Edoardo: Instagram, GitHub, LinkedIn, X

Follow Codrops: X, Facebook, Instagram, LinkedIn, GitHub

License

MIT