Three.js Image Gallery: 3D Photo Walls and Scroll Galleries

Each image is a PlaneGeometry sized to the image's aspect ratio, with the photo loaded as a map texture on a MeshBasicMaterial (unlit, since gallery images usually shouldn't respond to scene lighting like a 3D object would) or a custom shader for hover/transition effects. Arrange them in a grid (a simple nested loop setting x/y positions with consistent spacing) or a more organic scattered layout, depending on the desired look.

For hover effects, the common "image scales up and brightens on hover" pattern, raycasting detects which plane the pointer is over, and the response is either a simple scale/opacity tween (GSAP, see the animation guide) or a shader-driven distortion for a more elaborate effect.

The common "scroll to move through a 3D gallery" pattern maps scroll position (or a virtual scroll value from a smooth-scroll library like Lenis, which this site itself uses) to camera position or rotation, rather than relying on the browser's native scroll to move actual DOM content. The gallery images stay fixed in 3D space; scrolling moves the camera through them, which is what creates the "flying through a 3D space" feel distinct from a normal 2D scrolling image grid.

Loading dozens of full-resolution images up front stalls the initial page load. The standard mitigation: load a small, blurred or low-resolution placeholder texture immediately for every plane, then lazy-load the full-resolution texture for each image only as it approaches the camera's view (or the user scrolls near it), swapping the material's map once the full texture finishes loading. This keeps initial load fast regardless of total gallery size, and is the same progressive-loading principle behind lazy-loaded <img> tags, applied to 3D textures instead.