menu

🎨 MuseVersive

MuseVersive est une expérience interactive de musée virtuel en 3D fonctionnant directement dans le navigateur. Plus qu'une simple galerie d'art, ce projet permet à l'utilisateur de "plonger" physiquement à l'intérieur des toiles célèbres (comme La Nuit étoilée ou Le Cri) pour explorer des environnements générés en 360° grâce à l'intelligence artificielle.

✨ Fonctionnalités Principales

Exploration 3D Fluide : Déplacement à la première personne (FPS) dans l'environnement du musée en utilisant le clavier (ZQSD/WASD) et la souris.
Système d'Interaction (Raycaster) : Détection intelligente des œuvres à proximité avec affichage d'une interface utilisateur dynamique (Prompt [E]).
Transitions Cinématographiques : Animations de caméra fluides et fondus au noir gérés avec GSAP pour une immersion sans coupure.
Mondes Immersifs (Skybox/SkyDome) : Téléportation à l'intérieur des tableaux via des environnements panoramiques 8K à 360° générés par IA, avec ajout de systèmes de particules (poussière d'étoiles) pour simuler la sensation de vitesse et de profondeur.

🛠️ Technologies Utilisées

Ce projet repose sur un stack technique moderne orienté graphisme web et intelligence artificielle :

Three.js : Moteur 3D principal (Rendu WebGL, Géométries, Lumières, Matériaux).
GSAP (GreenSock) : Moteur d'animation pour les déplacements de caméra et les transitions d'opacité.
JavaScript (ES6+) : Logique de jeu, structuration modulaire des composants.
Blockade Labs (Skybox AI) : Génération par IA des cartes d'environnement équirectangulaires (HDR/JPG) pour les intérieurs de tableaux.

📂 Structure du Projet

L'architecture est pensée de manière modulaire pour faciliter l'ajout de nouvelles œuvres et de nouveaux mondes :

📦 MuseVersive
 ┣ 📂 assets
 ┃ ┣ 📂 textures      # Textures des toiles, cadres, et matériaux
 ┃ ┗ 📂 panoramas     # Images 360° générées par IA (ex: starry_night_pano.jpg)
 ┣ 📂 js
 ┃ ┣ 📂 components
 ┃ ┃ ┣ 📜 artworks.js    # Création des toiles, cadres et plaques descriptives
 ┃ ┃ ┣ 📜 interaction.js # Raycaster, détection des touches et animations GSAP
 ┃ ┃ ┗ 📜 worlds.js      # Générateur de SkyDomes et d'environnements immersifs
 ┃ ┗ 📜 main.js          # Initialisation de la scène, de la caméra et boucle de rendu
 ┣ 📜 index.html         # Point d'entrée web
 ┗ 📜 style.css          # Styles de l'interface utilisateur (Overlay, prompts)