Я объединил 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 уже доступна в браузере:

Буду рад, если попробуете игру и поделитесь впечатлениями. Особенно интересно узнать, какие возможности вы хотели бы увидеть в таком проекте дальше.