Ігрова кімната: ретро-3D-аркада в браузері

Створіть повноцінну ігрову браузерну аркаду під назвою «Playroom» із ностальгійною естетикою апаратури кінця 1980-х і стриманим сучасним редакційним інтерфейсом. Використайте Three.js для рендерингу та завантажуйте окремі GLB-моделі CRT-монітора, консолі, контролера й ігрових картриджів. Створіть справді робочий досвід, а не статичний макет. Артдирекція: використайте теплий кремово-білий фон, зістарений пластик кольору слонової кістки, вугільно-чорні деталі, приглушений шавлієво-зелений, пилову теракоту та вицвілий синій. Поєднайте заголовки Space Grotesk із невеликими підписами DM Mono. Додайте тонкі розділювальні лінії, багато вільного простору, ненав’язливі технічні позначки та компактну навігацію. Уникайте неонової кіберпанкової стилістики, глянцевих карток у стилі панелі керування та надмірної кількості градієнтів. Головна сторінка має нагадувати ретельно скомпоновану предметну фотографію. Розмістіть CRT-монітор помітно праворуч, консоль — ліворуч, вертикально вставлений картридж — надійно в консолі, а контролер — попереду. З’єднайте пристрої вигнутими кабелями, які підходять до відповідних роз’ємів. Використайте м’яке спрямоване освітлення, правдоподібні контактні тіні, заокруглені краї та злегка шорсткі пластикові матеріали. Не допускайте перетинів між об’єктами. Додайте головній сторінці повільне кінематографічне орбітальне обертання з боку в бік. Дозвольте користувачам обертати огляд перетягуванням, а потім плавно відновлюйте автоматичний рух. Додайте стримані імпульси даних, що повільно проходять навколо вибраних деталей апаратури. На CRT-моніторі має циклічно відтворюватися піксельна сцена режиму очікування з маленьким маскотом, ненав’язливими рядками розгортки та написом «PLAYER ONE». Точно використайте на обличчях маскота надані жовту T і білу V як елементи логотипа. Помітна кнопка «УВІМКНУТИ» або натискання на сцену з консоллю має запускати один безперервний перехід. Плавно наблизьте камеру до екрана CRT, додайте анімований потік даних і поступово розгорніть сцену на всю область перегляду. Упродовж усього переходу перекривайте верхній і нижній краї. Відкрийте колекцію картриджів плавним переходом від темного до світлого, без раптової появи накладеного шару чи різкого стрибка камери. До колекції входять три різні вертикально встановлені картриджі: зелений шавлієвий Snake, теракотовий Breakout і синій Blocks. На кожному мають бути чіткі написи на обкладинці та маленький анімований маскот, що сидить згори. Використайте ненав’язливе погойдування, піднімання під час наведення та легкий нахил. Підтримайте як натискання на 3D-картриджі, так і доступні текстові кнопки під ними. Кожен вибір відкриває інтерфейс ігрового процесу. У Snake додайте ланцюжки їжі та фрукти з обмеженим часом дії бонусу. У Breakout передбачте кілька схем розташування цеглин і бонуси для платформи або мультиболу. У Blocks додайте попередній перегляд наступної фігури, тінь фігури під час падіння та нарахування очок за очищення ліній. Додайте зрозумілі інструкції, відображення рахунку, паузу, перезапуск і навігацію назад. Підтримайте керування клавіатурою та сенсорні кнопки, а також збереження найкращого результату локально. Відокремте вміст екрана й підписи картриджів в окремі текстури, що створюються під час виконання, щоб текст залишався чітким. Збережіть іменовані частини моделей для взаємодії та анімації маскотів. Додайте індикатор завантаження, придатний для використання резервний режим на випадок помилки завантаження 3D-ресурсів, адаптивні макети, помітний фокус клавіатури та підтримку зменшення анімації. Організуйте проєкт належним чином, перевірте всі три гри й переходи та підготуйте його до розгортання на GitHub і Vercel.