Site Web

Derrière la FS 60P : comment fonctionne une page produit 3D en temps réel

Le problème résolu

Vous voulez une page produit qui donne une impression premium et interactive plutôt qu'un template statique de plus, mais construire ça demande en général un pipeline 3D sur mesure que la plupart des équipes n'ont pas. Cette ressource décortique comment thewatch.60fps.fr transforme un seul modèle 3D en site produit complet (hero, changement de couleur, diagramme éclaté, fiche technique), et donne le prompt pour construire votre propre version une fois que vous avez un asset 3D.

Le prompt à copier

Optimisé avec

Construis un site vitrine produit d'une seule page pour un produit physique, avec React, TypeScript, Vite et @react-three/fiber (Three.js). Le hero entier est un visualiseur 3D en temps réel du modèle .glb réel du produit. Pas de vidéo, pas de carrousel photo en visuel principal.

Visualiseur 3D (hero) :
- Charge le modèle .glb du produit dans un composant Canvas React-Three-Fiber, centré dans la fenêtre.
- Rotation automatique lente au repos ; l'utilisateur peut glisser pour orbiter et zoomer au scroll/pincement.
- Éclaire avec une environment map HDR (.exr ou .hdr équirectangulaire) via le composant Environment, avec la prop files réglée sur envmap.exr, pour de vrais reflets, pas un éclairage ambiant plat. Utilise des matériaux PBR avec metalness/roughness réalistes sur les parties brillantes.
- Affiche une petite indication à l'écran ("Glisser pour explorer") qui disparaît après la première interaction.

Changement de variante/couleur :
- Si le produit existe en plusieurs finitions, garde UN seul modèle et change le matériau/la texture par variante au clic, plutôt que de charger des modèles séparés. Affiche une fiche technique en direct qui se met à jour par variante.

Diagramme éclaté / points d'intérêt :
- Ajoute des points cliquables ancrés sur des zones du modèle (depuis la hiérarchie de meshes du .glb, ou des marqueurs projetés 3D vers 2D placés manuellement). Cliquer en ouvre un panneau d'info : nom de la pièce, fonction en une ligne, bouton de fermeture.

Titre & texte :
- Nom de produit court et affirmé, plus une phrase de positionnement.
- Deux sous-titres courts associant un langage artisanal à un détail technique.

Section photo/détail :
- Quelques plans rapprochés du modèle sous des angles fixes, avec un petit compteur de frame numéroté ("34/62") dans un coin.

Nomenclature :
- Une liste simple de chaque composant avec un poids ou une spécification réelle ou plausible. Des chiffres précis, pas des adjectifs.

Typographie : une police d'affichage distinctive pour le nom du produit/les titres, associée à une police sans-serif simple pour le corps/l'interface. Fond sombre, chrome minimal, laisse le modèle et le texte porter la page.

Stack technique : React + TypeScript + Vite, @react-three/fiber + @react-three/drei, Tailwind CSS pour la mise en page/typographie uniquement.

Ce que fait le site

FS 60P est un microsite produit pour une montre de luxe vitrine, construit entièrement autour d’un seul modèle 3D en temps réel. Pas de vidéo, pas de carrousel photo : le modèle lui-même est le hero, le sélecteur de couleur, et le diagramme éclaté.

Parcours de la page

Hero 3D en direct. La montre remplit l’écran, rotation automatique au repos, orbite au glisser.
Changement de coloris. Un contrôle fait défiler quatre finitions sur le même modèle (changement de matériau, pas quatre assets séparés), avec une fiche de poids qui se met à jour par finition.
Diagramme éclaté. Cliquer sur un point du modèle ouvre un panneau d’info avec le nom et la fonction de la pièce. Le hero devient aussi un diagramme technique.
Photos lookbook. Plans rapprochés avec un petit compteur de frame dans un coin, donne l’impression d’un vrai plateau photo.
Nomenclature. Chaque composant listé avec son poids en grammes. Des chiffres précis, pas des adjectifs.

L’asset derrière tout ça

Le modèle : watch-DXFPNOEl.glb. Éclairé avec une environment map HDR plus une metal-response map (les deux en .exr), la vraie différence entre « asset de jeu vidéo » et « photo ».

Cadrage honnête

Ceci est généralisé exprès : ça suppose que vous avez (ou pouvez obtenir) votre propre modèle .glb. Sans ça, cette technique ne s’applique pas encore, c’est une vraie contrainte, pas une formalité. Site de référence analysé structurellement par inspection en direct, pas scrapé ni copié : rien ici n’est le vrai code source de thewatch.60fps.fr.