Galerie Immersive 3D — L’Expérience Portfolio Interactif

19 janv. 2026

Né d'une volonté d'explorer la déambulation numérique, ce projet personnel réinvente le format classique du portfolio sous la forme d'un musée virtuel interactif. J'ai conçu cette expérience à la frontière entre mes compétences d'ingénierie front/back et ma sensibilité graphique. Développée avec React Three Fiber (Three.js) et Vite, l'application concilie fluidité technique (optimisation des assets, préchargement immersif), direction artistique néo-brutaliste épurée et affordance poussée grâce à des contrôles universels sur ordinateur (Pointer Lock API) et mobiles (capteurs gyroscopiques).

Galerie Immersive 3D — L’Expérience Portfolio Interactif

19 janv. 2026

Né d'une volonté d'explorer la déambulation numérique, ce projet personnel réinvente le format classique du portfolio sous la forme d'un musée virtuel interactif. J'ai conçu cette expérience à la frontière entre mes compétences d'ingénierie front/back et ma sensibilité graphique. Développée avec React Three Fiber (Three.js) et Vite, l'application concilie fluidité technique (optimisation des assets, préchargement immersif), direction artistique néo-brutaliste épurée et affordance poussée grâce à des contrôles universels sur ordinateur (Pointer Lock API) et mobiles (capteurs gyroscopiques).

CLIENT

Projet Personnel

CLIENT

Projet Personnel

Role

Creative Developer & UX/UI Designer

Role

Creative Developer & UX/UI Designer

Service

Développement Web 3D (React Three Fiber / Three.js), Creative Coding, UX d'affordance spatiale, Interaction mobile (Gyroscopie)

Service

Développement Web 3D (React Three Fiber / Three.js), Creative Coding, UX d'affordance spatiale, Interaction mobile (Gyroscopie)

Parallax image
Parallax image

Architecture technique, réactivité & esthétique néo-brutaliste

Architecture technique, réactivité & esthétique néo-brutaliste

Pour garantir un affichage fluide sans sacrifier la fidélité graphique, j'ai structuré la scène avec React Three Fiber (R3F) et le bundler Vite. L'optimisation des textures et la gestion de la mémoire ont été traitées avec une rigueur de développeur pour éliminer tout temps d'attente parasite, soutenu par un loader soigné qui prépare l'utilisateur à une visite qualitative.

Visuellement, j'ai fait évoluer le concept initial d'un brutalisme très marqué vers un néo-brutalime minimaliste : des contrastes affirmés et une typographie nette, laissant l'espace 3D agir comme un écrin au service exclusif des projets exposés.

Affordance spatiale, Pointer Lock & exploration gyroscopique sur mobile

Affordance spatiale, Pointer Lock & exploration gyroscopique sur mobile

La principale difficulté d'un espace 3D est d'éviter la désorientation. Pour rendre la visite naturelle, j'ai implémenté la Pointer Lock API et les contrôles au clavier, reprenant les codes intuitifs du jeu vidéo pour ancrer les déplacements, complétés par des feedbacks visuels doux au survol des murs.

Sur smartphone, plutôt que de proposer un mode dégradé, j'ai exploité l'API de gyroscopie du navigateur : en bougeant physiquement son appareil, l'utilisateur oriente son regard dans la galerie. Ce choix interactif immersif démontre ma volonté constante de tester les technologies émergentes et d'enrichir les usages tactiles.