Сделал 3D-игру для браузера, где нужно искать аномалии в баре — Taproom 8
Я frontend-разработчик, поэтому большую часть времени работаю с веб-интерфейсами. Но давно хотелось сделать не просто технический прототип, а законченный игровой проект, который можно открыть в браузере и дать поиграть другим людям.
С Three.js я познакомился во время разработки 2D/3D-редактора. Тогда мне стало интересно, получится ли применить полученные знания не только для редакторов и интерфейсов, но и для полноценной игры. Поэтому я решил попробовать сделать собственный игровой проект.
Так появилась Taproom 8 — небольшая 3D-игра с элементами хоррора и механикой поиска аномалий.
Исходный код проекта: GitHub
Что нужно делать в игре
Игра отдаёт дань уважения играм Exit 8 и серии Backrooms.
Сначала игрок попадает в обычную комнату. Это нулевой цикл — в нём нет аномалий. Нужно осмотреть помещение и запомнить его состояние: где стоит мебель, какие предметы присутствуют или отсутствуют.
Затем начинаются следующие циклы. Комната выглядит почти так же, но в ней появляется изменение.
Задача игрока — заметить отличие и выбрать правильную дверь:
«Есть аномалия»;
«Аномалий нет».
Если выбор правильный, игрок переходит дальше. Если ошибся, прохождение возвращается к началу.
Почему именно такой формат
В качестве визуального направления я выбрал мрачную low-poly графику с эффектом старых игр для PlayStation. Хотелось получить не реалистичный бар, а немного странное место, которое вызывает дискомфорт.
PS1-эффект я не стал делать только через готовый фильтр поверх экрана. Сцена сначала рисуется в уменьшенном разрешении, текстуры используют nearest-фильтрацию, а позиции вершин привязываются к виртуальной пиксельной сетке.
Что такое Three.js
Three.js — это JavaScript-библиотека для работы с 3D-графикой в браузере. Она использует WebGL и предоставляет базовые инструменты для создания сцен, камер, геометрии, материалов, текстур, освещения и загрузки 3D-моделей.
Важно, что Three.js — не игровой движок в привычном смысле. В ней нет готового редактора уровней, полноценной физики, системы персонажей, диалогов, сохранений и других игровых подсистем, которые обычно ассоциируются с Unity или Unreal Engine.
По сути, это набор инструментов для отображения 3D-графики и работы с ней. Поэтому в Taproom 8 мне пришлось самостоятельно собрать многие части игры: игровой цикл, загрузку уровня, управление игроком и камерой, столкновения, двери, систему раундов и аномалий, звук, интерфейс и интеграцию с Яндекс Играми.
Именно поэтому проект оказался для меня интересным: я не просто подключал готовые игровые механики, а собирал игровой слой поверх библиотеки, с которой раньше познакомился во время разработки 2D/3D-редактора.
Как устроена разработка
Стек получился немного необычным для игры:
Vue 3 — меню, настройки и интерфейс;
TypeScript — игровая логика и типы;
Three.js — 3D-сцена, камера, модели и взаимодействия;
Vite — сборка проекта;
Pinia — состояние интерфейса;
vue-i18n — русский и английский языки;
Vitest — тестирование игровой логики.
Vue здесь не управляет каждым объектом в 3D-сцене. Я разделил приложение на два слоя.
Игровой движок отвечает за сцену, игрока, камеру, столкновения, двери, звук и раунды. Vue отвечает за экраны, HUD, меню, настройки и мобильные контролы.
Между ними используется типизированная шина событий. Например, UI не должен знать, как именно Three.js открывает дверь. Он отправляет событие «выбрать дверь», а игровой координатор уже решает, что делать с этим действием.
Такой подход оказался полезен, когда количество систем начало расти: меню, загрузка, звук, пауза и сам игровой цикл не превратились в один огромный компонент.
Аномалии сделаны как отдельная система
Одной из главных задач было сделать так, чтобы добавление новых аномалий не требовало переписывать половину игры.
Сцена загружается из GLB-файла. Внутри неё есть специальные группы объектов, которые движок сканирует при загрузке. По имени объекта и суффиксу сложности он понимает, что с ним можно сделать.
Дальше система сама собирает пулы аномалий и распределяет их по уровням. В начале вероятность простых изменений выше, затем постепенно увеличивается доля средних и сложных вариантов.
Технически аномалия применяется только на время текущего цикла. После ответа игрока состояние объекта восстанавливается, а перед следующим раундом активируется новая аномалия.
Звук и управление
В игре есть фоновая музыка, звуки меню, открывания дверей, шагов и окружения. Для некоторых источников используется пространственное позиционирование, чтобы звук зависел от положения игрока в комнате.
Самый неприятный этап — публикация
До этого проекта мне казалось, что самая сложная часть — сделать саму механику. На практике после появления рабочей игры начался второй большой этап: адаптация под платформу.
Первая версия Taproom 8 не прошла модерацию. После этого пришлось отдельно пройтись по описанию игры, локализации, экрану загрузки, обработке пауз, рекламным переходам, мобильному управлению и общему поведению приложения при сворачивании.
Интеграция с платформой включает уведомление о готовности игры, управление игровым состоянием при паузе, полноэкранную и rewarded-рекламу, а также задел под внутриигровые покупки.
Игра должна корректно переживать не только обычный игровой цикл, но и вкладку браузера, потерю фокуса, рекламный экран и возвращение игрока обратно.
После доработок игру удалось опубликовать. Этот этап показал, что релиз браузерной игры состоит не только из сцены и игровой механики. Необходимо учитывать окружение платформы, её ограничения и различные сценарии поведения пользователя.
Что получилось в итоге
На текущей версии в репозитории есть отдельный 3D-движок, UI на Vue, загрузка GLB-модели и текстур, PS1-рендеринг, мобильное управление, звук, локализация, интеграция с платформой и система аномалий.
Я понимаю, что это не большая коммерческая игра и не попытка конкурировать с полноценными хоррорами. Это компактный самостоятельный проект, на котором хотелось пройти весь путь: от идеи и сцены до работающего релиза в браузере.
Главным результатом для меня стал опыт создания полноценного игрового проекта поверх Three.js: с собственной архитектурой, игровым циклом, системой аномалий, интерфейсом, звуком, оптимизацией и публикацией.
