3D Camera Configurator — Interactive Product Storytelling

We built this camera concept to let people explore product features directly on a 3D model. Click a hotspot and the view moves towards that part of the camera, with a panel explaining what you’re looking at.

The camera stays at the centre of the page. Small movements in the scene and animated panels connect each feature view to the next, while the interface keeps the selected part and its description together.

We developed the 3D scene with React Three Fiber and Three.js, using shared state for the hotspots, camera positions and content. GSAP handles the panel transitions and Maath smooths the movement in the scene.

This is an independent concept using a Nikon camera model. Nikon was not a client or collaborator on the project.

Built with React, TypeScript, Vite, Three.js, React Three Fiber, Drei, GSAP and Maath.

Explore the live camera demo — select the model’s hotspots to move between close-up views and feature explanations.