Skip to content
Web Development

Nina's Virtual Gallery

A love letter to art and family. Ninoslava Pantelin paints privately for her family. Her work has never been exhibited publicly. I built an immersive 3D virtual gallery where visitors control a walking character through a museum-like space, approaching each painting to view it up close. Built entirely in the browser using Three.js, React Three Fiber, and WebGL. No plugins, no downloads, works on mobile.

ClientNinoslava Pantelin
IndustryArt & Gallery
Timeline1 day
Year2026
31
Artworks
Original paintings displayed in 3D gallery
3D
WebGL
Full 3D experience running in the browser
1 day
Built In
From concept to deployed gallery
60fps
Mobile
Smooth performance on mobile devices

She never had an exhibition. Now she has a gallery.

01

The Challenge

How do you give private art the gallery experience it deserves without a physical space? Traditional image galleries are flat and lifeless. I wanted the sense of presence: walking through a space, seeing paintings at scale on white walls, hearing footsteps echo. The challenge was building a full 3D experience that runs smoothly on mobile, loads 31 high-resolution paintings without crashing, and feels like a real gallery visit.

02

The Process

01

Reference & Design

Analyzed the thevertmenthe.dault-lafon.fr gallery for inspiration. Extracted their character model, studied camera angles, FOV settings, and walking animations to match the premium gallery feel.

02

3D Environment

Built gallery room with textured marble floors, plaster walls, track lighting fixtures, center divider walls, and benches. All materials optimized for mobile GPU with meshBasicMaterial for performance.

03

Character & Controls

Integrated GLTF character model with walk/idle animation crossfading, touch joystick for mobile, keyboard controls for desktop, shortest-path rotation, and footprint trail effects.

04

Artwork Display System

Async texture loading for 31 paintings with dynamic aspect ratios, black frames with white matting, viewing circle interaction zones with cinematic camera panning, and special frameless display for wood-mounted art.

03

The Solution

Three.jsReact Three FiberWebGL3DNext.js

I built a complete 3D gallery using React Three Fiber (Three.js for React). The experience features a GLTF-animated character with walk/idle animations, a touch joystick for mobile controls, viewing circles on the floor that trigger cinematic camera pans when the character approaches a painting, footprint effects that trail behind the walker, textured marble floors and plaster walls, and track lighting on the ceiling. Each painting loads asynchronously and renders at its correct aspect ratio in elegant black frames with white matting. One special piece, an oil painting on a circular wood slice, renders without a frame, floating directly on the wall.

04

Results

31 paintings exhibited
3D WebGL gallery
Mobile-optimized
GLTF animated character

See it live

Visit the live website and explore the finished project.

View Live Site

Like what you see?

Every project starts with a conversation. Tell us about your goals and we will figure out the best way to get there.