La lumière est l’interface
Chaque réglage produit un changement visible dans la pièce, jamais un simple effet appliqué à l’image.
Concept · Beyond LabWebdesign immersifDirection artistique 3DCreative technology
LUMEN
Shape the Light : manipuler la lumière d'un intérieur, en temps réel, dans le navigateur.
Quand on choisit un luminaire, on regarde un objet, alors qu'on achète une atmosphère. LUMEN inverse ce rapport : on ne regarde plus la lampe, on regarde ce que sa lumière fait à l'espace. Une expérience web 3D construite autour d'un seul geste, la lumière qui révèle une pièce.
Lancer l'expérienceOuvrir LUMEN- Projet
- Beyond Lab · Experiment 003
- Année
- 2026
- Rôle
- Product design, webdesign immersif, direction artistique 3D, creative technology
- Outils
- Blender, React, Three.js, React Three Fiber, GSAP
- Statut
- Prototype de design interactif
01 — L'intention
Une expérience qui se ressent avant de se comprendre.
Je voulais éviter deux écueils : la landing page produit classique et le configurateur 3D aux allures de tableau de bord. D'abord un premier geste fort, puis une liberté de manipulation progressive.
Un seul environnement
Une scène parfaitement réalisée plutôt que plusieurs scènes moyennes.
Une interface qui s’efface
L’écran appartient à l’espace 3D. Les contrôles restent discrets et éditoriaux.
02 — Parcours utilisateur
De l'obscurité à la lumière.
01
L’obscurité
L’expérience s’ouvre sur une pièce presque noire. Seule la lune, à travers la baie vitrée, dessine l’architecture. La lampe apparaît en contre-jour, lisible grâce à un léger reflet bleuté sur son chrome. Puis deux messages : « Light changes everything », « Hold to illuminate ».
02
La révélation
L’utilisateur maintient le clic, le doigt ou la barre d’espace. Une jauge se remplit, la sphère s’éveille et la lumière gagne réellement la pièce. Relâcher ne fait jamais perdre la progression : le maintien devient un geste de découverte, pas une épreuve.
03
L’exploration
Une fois la révélation terminée, la caméra glisse vers une vue d’ensemble et les contrôles apparaissent : intensité, température, finition, trois vues caméra (Product, Room, Detail) et une rotation autour de la scène dans des limites cohérentes.
04
Shape the Light
L’interaction signature. On glisse directement dans la pièce pour diriger le faisceau. La tête de la lampe pivote, les ombres se déplacent et, quand on vise le plafond, la lumière rebondit et éclaire la pièce par le haut.
Ce qui rend le geste « Shape the Light » naturel
- 01Un glisser relatifLe geste part du point de départ : la lampe ne saute jamais vers le curseur.
- 02Des mouvements amortisUne sensation de précision mécanique, comme sur un vrai luminaire.
- 03Des limites réalistesLa lampe ne fait aucune rotation physiquement impossible.
- 04Le panneau s’effacePendant le geste, toute la place revient à la lumière.
- 05La même maîtrise au clavierDeux curseurs Pan et Tilt reproduisent le geste.
03 — Direction artistique
Une pièce qui vit autant dans l'ombre que dans la lumière.
Un salon contemporain de standing : mur en pierre beige, parquet de chêne, poutres en béton, grande baie vitrée et rideaux en lin. Un mobilier sobre, dont un canapé modulaire dessiné pour le projet, et deux œuvres originales.
La lampe LUMEN · création originale
Pensée pour que la direction de la lumière se lise immédiatement. On comprend d'un regard où va la lumière.
- Une base lourde en acier noir
- Un fût fin
- Une rotule chromée
- Une flèche orientable équilibrée par un contrepoids
- Une parabole avec une sphère opale à son foyer
Palette
Noir profond
Anthracite
Beige pierre
Blanc cassé
Chrome
Lumière ambrée
Blanc froid
04 — Interface
Éditoriale plutôt que tableau de bord.
Une seule typographie, Poppins, dans des graisses très légères. Des filets fins, des libellés en capitales espacées, des valeurs alignées, et de grandes zones laissées à la scène 3D.
Les finitions changent la lumière
Chaque finition change l'aspect de la lampe et la façon dont elle diffuse : le verre dépoli adoucit le faisceau et laisse filtrer une lueur autour de la tête, le chrome donne un faisceau plus net.
Une température honnête
Les presets Warm, Neutral et Cool glissent progressivement vers leur valeur, sans coupure. Une mention discrète précise qu'il s'agit d'une approximation visuelle, pas d'une simulation photométrique.
05 — Le défi technique
Une lumière crédible dans un navigateur.
Le navigateur ne peut pas calculer en temps réel tous les rebonds de la lumière. J'ai donc combiné plusieurs couches. L'intensité et la température modifient réellement ces lumières, jamais un filtre appliqué à l'image.
- 01Lumière directeTemps réelUn vrai projecteur 3D avec des ombres calculées en direct. Quand le faisceau bouge, les ombres bougent.
- 02Lumière indirectePrécalculée dans BlenderLe rebond de la lumière calculé pour 15 orientations de la lampe, mélangées en continu selon la position du faisceau.
- 03La nuitPrécalculéeLa lune, le ciel et les ombres des menuiseries sur le sol.
- 04Les refletsPanoramas recalésDes panoramas de la pièce, recalés sur son volume pour que le parquet et le chrome reflètent un espace cohérent.
- 05L’airStylisé, synchroniséUne lueur et quelques particules de poussière rendent le faisceau perceptible, toujours synchronisées avec la vraie lumière.
60 i/smesurées sur desktop, Apple M4 sous Chrome
Adaptativela résolution s’ajuste à la puissance de l’appareil
Ombres à la demanderecalculées seulement quand le faisceau bouge
Repliune image haute qualité si la 3D n’est pas prise en charge
Accessibilité : contrôles utilisables au clavier, libellés pour les lecteurs d'écran et respect de la préférence de réduction des animations. La révélation repose sur l'éclairage réel de la scène, pas sur un fondu ou une vidéo.
06 — Galerie
Une pièce, mille atmosphères.
07 — Ce que j'en retiens
La justesse d'un premier geste.
LUMEN m'a confirmé qu'une expérience immersive ne tient pas à la quantité de fonctionnalités, mais à la justesse d'un premier geste. Tout le projet est construit autour d'un moment : la lumière qui révèle un espace.
Le prototype ouvre une piste concrète pour les marques de luminaires : permettre de comprendre comment une lampe transforme une pièce avant de la choisir.
Prototype de design interactif · Les valeurs de lumière sont des approximations visuelles, pas des mesures photométriques. Assets complémentaires : Poly Haven (CC0).
Lancer l'expérienceOuvrir LUMEN