Playroom : salle d’arcade rétro en 3D

Créez une salle d’arcade complète et jouable dans le navigateur, appelée « Playroom », avec une esthétique matérielle nostalgique de la fin des années 1980 et une interface éditoriale contemporaine et sobre. Utilisez Three.js pour le rendu et chargez des assets GLB distincts pour le moniteur CRT, la console, la manette et les cartouches de jeu. Livrez une expérience fonctionnelle, pas une maquette statique. Direction artistique : utilisez un arrière-plan blanc cassé chaleureux, du plastique ivoire patiné, des détails anthracite, du vert sauge désaturé, de la terre cuite poudrée et du bleu délavé. Associez des titres en Space Grotesk à de petites étiquettes en DM Mono. Ajoutez de fines lignes de séparation, beaucoup d’espace blanc, de subtiles annotations techniques et une navigation compacte. Évitez le style cyberpunk néon, les cartes de tableau de bord brillantes et les dégradés trop nombreux. La page d’accueil doit évoquer une photographie de produit soigneusement composée. Placez le moniteur CRT bien en évidence vers la droite, la console vers la gauche, une cartouche à la verticale, correctement insérée dans la console, et une manette au premier plan. Reliez les appareils avec des câbles incurvés raccordés à leurs véritables prises. Utilisez une lumière directionnelle douce, des ombres de contact crédibles, des arêtes arrondies et des matériaux plastiques légèrement rugueux. Évitez toute intersection entre les objets. Donnez à la page d’accueil une rotation orbitale lente et cinématographique d’un côté à l’autre. Permettez aux utilisateurs de faire glisser la vue pour la faire pivoter, puis reprenez progressivement le mouvement automatique. Ajoutez de discrètes impulsions de données se déplaçant lentement autour de certains détails matériels. Le CRT doit afficher une scène d’attente en pixel art qui tourne en boucle, avec un petit mascotte, de subtiles lignes de balayage et la typographie « PLAYER ONE ». Utilisez fidèlement le logo fourni, composé d’un T jaune et d’un V blanc, sur les visages des mascottes. Un bouton « POWER ON » bien visible, ou un clic sur la scène de la console, doit lancer une transition continue unique. Faites avancer progressivement la caméra vers l’écran du CRT, introduisez un flux de données animé et agrandissez peu à peu la scène jusqu’à ce qu’elle couvre toute la zone d’affichage. Couvrez les bords supérieur et inférieur pendant toute la transition. Révélez la collection de cartouches au moyen d’une transition fluide du sombre vers le clair, sans superposition apparaissant soudainement ni saut brutal de caméra. La collection comprend trois cartouches distinctes, dressées à la verticale : Snake vert sauge, Breakout terre cuite et Blocks bleu. Chacune présente une typographie nette sur sa jaquette et une petite mascotte animée perchée au-dessus. Utilisez un léger mouvement de va-et-vient vertical, un soulèvement au survol et une inclinaison douce. Prenez en charge à la fois le clic sur les cartouches 3D et des boutons textuels accessibles placés en dessous. Chaque sélection ouvre une interface de jeu jouable. Snake comprend des chaînes de nourriture et des fruits bonus chronométrés. Breakout propose plusieurs configurations de briques ainsi que des bonus pour la raquette ou le multiball. Blocks comprend un aperçu de la prochaine pièce, un fantôme indiquant la position d’atterrissage et un système de score pour les lignes supprimées. Fournissez des instructions claires, le score, les commandes pause et recommencer, ainsi qu’une navigation de retour. Prenez en charge les commandes au clavier et les boutons tactiles, avec une conservation locale du meilleur score. Conservez le contenu de l’écran et les étiquettes des cartouches sous forme de textures d’exécution distinctes afin que le texte reste net. Préservez les noms des éléments de modèle pour l’interaction et l’animation des mascottes. Ajoutez un indicateur de chargement, un mode de secours utilisable si les assets 3D échouent, des mises en page réactives, un focus clavier visible et la prise en charge de la réduction des mouvements. Organisez proprement le projet, vérifiez les trois jeux et les transitions, et préparez-le pour un déploiement sur GitHub et Vercel.