Website

Behind the FS 60P: how a real-time 3D product page works

The problem it solves

You want a product page that feels premium and interactive instead of another static template, but building one usually means a custom 3D pipeline most teams do not have. This breaks down exactly how thewatch.60fps.fr turns a single 3D model into a full product site (hero, color swap, exploded parts diagram, spec sheet), and gives you the prompt to build your own version once you have a 3D asset.

The prompt to copy

Optimized with

Build a single-page product showcase site for a physical product, using React, TypeScript, Vite, and @react-three/fiber (Three.js). The entire hero is a real-time 3D viewer of the product's actual .glb model. No video, no photo carousel as the primary visual.

3D viewer (hero):
- Load the product's .glb model into a React-Three-Fiber Canvas component, centered in the viewport.
- Auto-rotate slowly when idle; let the user drag to orbit and pinch/scroll to zoom.
- Light it with an HDR environment map (an .exr or .hdr equirectangular map) via the Environment component, files prop set to envmap.exr, for real reflections, not flat ambient light. Use PBR materials with realistic metalness/roughness on glossy parts.
- Show a small on-screen hint ("Drag to explore") that fades after first interaction.

Variant/color swap:
- If the product has multiple finishes, keep ONE model and swap the material/texture per variant on click, rather than loading separate models. Show a live spec readout that updates per variant.

Exploded parts / hotspot diagram:
- Add clickable hotspots anchored to points on the model (from the .glb mesh hierarchy, or manually placed 3D-to-2D projected markers). Clicking one opens an info panel: part name, one-line function, close button.

Headline & copy:
- Short, confident product name plus one-line positioning statement.
- Two short subheads pairing craft language with a technical detail.

Photography/detail section:
- A few close-up shots of the model from fixed angles, with a small numbered frame-counter overlay ("34/62" style) in a corner.

Bill of materials:
- A plain list of every component with a real or plausible weight/spec value. Specific numbers, not adjectives.

Typography: one distinctive display face for the product name/headlines, paired with a plain sans for body/UI. Dark background, minimal chrome, let the model and the copy carry the page.

Tech stack: React + TypeScript + Vite, @react-three/fiber + @react-three/drei, Tailwind CSS for layout/typography only.

What the site does

FS 60P is a product microsite for a showcase luxury watch, built entirely around one real-time 3D model. No video, no photo carousel: the model itself is the hero, the color picker, and the exploded-parts diagram.

Walking the page

Live 3D hero. The watch fills the screen, auto-rotating at rest, draggable to orbit.
Colorway swap. One control cycles four finishes on the same model (material swap, not four separate assets), with a weight readout that updates per finish.
Exploded parts diagram. Clicking a hotspot on the model opens an info panel with the part’s name and function. The hero doubles as a technical diagram.
Lookbook stills. Close-up shots with a small frame-counter overlay in the corner, reads as « shot on a real set. »
Bill of materials. Every component listed with its weight in grams. Specific numbers, not adjectives.

The asset behind it

The model: watch-DXFPNOEl.glb. Lit with an HDR environment map plus a metal-response map (both .exr), which is the real difference between « looks like a game asset » and « looks like a photo. »

Honest framing

This is genericized on purpose: it assumes you have (or can source) your own .glb model. Without one, this technique does not apply yet, that is a real constraint, not a formality. Reference site analyzed structurally via live inspection, not scraped or copied: nothing here is thewatch.60fps.fr’s actual source code.