Я объединил LEGO и The Sims: строим дома, заселяем человечков и разносим всё из пушки
Помните, как в детстве можно было часами собирать из LEGO целые города, строить дома, придумывать истории для минифигурок, а потом внезапно решить, что пора всё разрушить?
А теперь представьте, что всё это можно делать в одном месте, прямо в браузере.
Я разработал LegoSim 3D — трёхмерную игровую песочницу, в которой соединились свободное строительство из LEGO, симуляция жизни в духе The Sims и физика разрушений. Здесь можно построить собственный дом, поселить в нём человечков, следить за их потребностями, а затем проверить прочность всей конструкции пушкой, динамитом или землетрясением.
Попробовать игру: https://lego-dusky.vercel.app
Строим всё, что придёт в голову
Основная часть игры — свободное строительство из LEGO-деталей.
В распоряжении игрока каталог классических кирпичиков разных размеров, тонких пластин, круглых колонн, наклонных элементов для крыш, окон, дверей и даже готовой мебели.
Можно построить небольшой домик, многоэтажное здание, башню или вообще что-нибудь совершенно нелепое. Ограничение здесь в основном одно — ваша фантазия.
Я постарался сделать строительство максимально похожим на работу с настоящим конструктором:
- Детали автоматически привязываются к сетке и шипам LEGO.
- Перед установкой отображается полупрозрачный предпросмотр будущего блока.
- Кубики правильно располагаются друг относительно друга по высоте и сторонам.
- С помощью клавиши R или специальной кнопки детали можно поворачивать на 90 градусов.
- Предусмотрена палитра классических цветов LEGO, включая прозрачные и золотые элементы.
Есть и небольшие детали, которые делают процесс приятнее: при соединении и разъединении кубиков проигрываются характерные пластиковые щелчки.
Звуки, кстати, не загружаются из готовых аудиофайлов — они генерируются непосредственно в браузере с помощью Web Audio API.
Но это не просто LEGO-конструктор — здесь есть своя жизнь
И вот тут начинается самое интересное.
Я добавил в игру симуляцию жизни, вдохновлённую The Sims. Построить красивый дом — это только половина дела. Теперь в нём могут поселиться LEGO-человечки.
Каждая минифигурка представляет собой отдельную составную 3D-модель с подвижными руками и ногами, лицом, причёской или головным убором.
У человечков есть собственные потребности, которые постепенно меняются со временем:
- Сытость — пора перекусить.
- Бодрость — пора отдохнуть.
- Веселье — хочется развлечений.
- Общение — не хватает взаимодействия с другими жителями.
Над выбранным персонажем появляется знакомый поклонникам The Sims зелёный кристалл Plumbob. Его цвет зависит от общего состояния персонажа: от зелёного до жёлтого и красного.
Управлять жителями тоже можно напрямую. Достаточно выбрать персонажа и кликнуть по месту, куда он должен отправиться. В меню доступны команды «Поесть», «Отдохнуть», «Танцевать!» и «Строить».
Персонажи передвигаются по игровому миру, обходят препятствия, могут подниматься на небольшие ступени и не должны проходить сквозь стены и мебель. Если путь оказывается заблокирован, человечек сообщает об этом облачком мысли.
А ещё у каждого жителя есть собственные забавные мысли и реплики в стиле Simlish — со всплывающими иконками и соответствующими звуковыми эффектами.
Получается небольшой живой мир, за которым можно наблюдать, которым можно управлять и который можно самостоятельно обустраивать.
А теперь самое приятное — можно всё разрушить
В какой-то момент строительство может наскучить. Или, наоборот, появится желание проверить, насколько хорошо получилось укрепить собственный дом.
Для этого в LegoSim 3D предусмотрен отдельный режим физической симуляции.
При его включении LEGO-конструкции перестают быть неподвижными декорациями. Детали превращаются в физические объекты, на которые действуют гравитация, столкновения, трение и отскоки.
И здесь начинается настоящий хаос.
В игре есть несколько способов устроить разрушения:
Пушка. Можно выстрелить тяжёлым ядром прямо в любую часть постройки. Стены разлетаются, этажи рушатся, а отдельные кубики разлетаются в стороны.
Динамит (TNT). Взрыв создаёт ударную волну, которая подбрасывает детали вверх и разбрасывает их вокруг.
Землетрясение. Проверяем устойчивость здания подземными толчками. Хороший способ выяснить, насколько надёжно вы построили свою башню.
Для физики используется Cannon-es. Я также добавил обработку столкновений и дополнительные временные шаги симуляции, чтобы детали не проваливались сквозь пол при сильных ударах.
Но самое важное — после всего этого не нужно собирать сотни кубиков обратно вручную.
Достаточно нажать кнопку сброса, и постройка мгновенно возвращается в исходное состояние.
Можно снова построить что-нибудь, снова разрушить и повторить этот процесс сколько угодно раз.
Три готовых мира для начала игры
Чтобы не начинать каждый раз с пустой площадки, в игре предусмотрено несколько готовых сценариев.
Уютный домик LEGO. Уже обставленный коттедж с садом, комнатами и двумя жителями — Бобом и Алисой. Здесь можно сразу познакомиться с симуляцией жизни, попробовать управление персонажами и понаблюдать за их потребностями.
Башня разрушений. Специальная высокая конструкция из LEGO-балок. Отличная мишень для пушки и динамита, если хочется сразу перейти к физике.
Чистая песочница. Пустая зелёная платформа размером 32×32 шипа. Никаких готовых построек — только вы, детали и безграничное пространство для экспериментов.
Также предусмотрено сохранение собственного мира в памяти браузера. Можно вернуться к своей постройке позже и продолжить строительство.
⚙ Немного о технической стороне
LegoSim 3D — это не просто набор картинок с кнопками. В основе проекта полноценная интерактивная 3D-сцена.
Основной технологический стек:
- React 19 и TypeScript — интерфейс и логика приложения.
- Three.js — 3D-графика, модели, материалы, освещение и камеры.
- Cannon-es — физика объектов, столкновения, гравитация и разрушения.
- Tailwind CSS v4 — стилизация интерфейса.
- Web Audio API — процедурная генерация звуков.
- Node.js и Express — серверная часть.
Визуально я старался сохранить узнаваемую пластику LEGO: характерные шипы, глянцевые поверхности, яркие цвета и прозрачные элементы.
Отдельное внимание уделил тому, чтобы разные механики работали в рамках одного игрового мира: можно не только строить здания, но и заселять их персонажами, управлять их повседневной жизнью, а затем переключаться на физическую симуляцию.
Попробуйте сами
В итоге получилась небольшая интерактивная вселенная, в которой одновременно живут три разных игровых подхода:
- LEGO — за возможность строить всё, что угодно.
- The Sims — за человечков, их потребности и повседневную жизнь.
- Физическая песочница — за удовольствие наблюдать, как собственные постройки эффектно разваливаются на сотни деталей.
Мне хотелось создать не игру с единственной правильной целью, а пространство для экспериментов. Сегодня можно построить уютный дом и поселить в нём двух человечков, завтра — возвести огромную башню, а через минуту проверить её прочность выстрелом из пушки.
LegoSim 3D уже доступна в браузере:
Буду рад, если попробуете игру и поделитесь впечатлениями. Особенно интересно узнать, какие возможности вы хотели бы увидеть в таком проекте дальше.