Room Planner — 3D-планировщик помещений
Frontend- и 3D-разработчик
О проекте
В 2016 году я самостоятельно разработал учебный браузерный планировщик помещений, который позднее стал основой прототипа для заказчика. Пользователь мог задавать размеры и форму комнаты, добавлять стены, двери и окна, расставлять мебель, изменять размеры, положение и поворот объектов, переключать камеру и сохранять готовые планы в JSON-файлы. Для базовой Three.js-механики использовался форк открытого проекта на GitHub, который я адаптировал под собственный интерфейс и логику. Часть 3D-моделей создавалась в Blender, экспортировалась через плагин в JSON и загружалась непосредственно в сцену.
Учебный проект, ставший основой клиентского прототипа
Проект начался как самостоятельная практика работы с трёхмерным пространством в браузере. Я хотел пройти полный путь от управления сценой и камерой до построения помещения, размещения мебели и сохранения результата.
В дальнейшем наработки заинтересовали заказчика. Планировщик остался на стадии прототипа, но его исходный код был передан для дальнейшего использования и развития.
- Самостоятельная разработка проекта
- Первый практический опыт с Three.js
- Переход от учебной задачи к прототипу
- Передача исходного кода заказчику
Создание комнаты прямо в браузере
Пользователь мог построить помещение, задать его форму и размеры, а затем добавить стены, двери и окна. Все изменения сразу отображались в интерактивной Three.js-сцене.
Управление камерой позволяло рассматривать план с разных ракурсов и проверять расположение элементов внутри комнаты до наполнения мебелью.
- Настройка формы и размеров помещения
- Добавление стен, дверей и окон
- Интерактивное обновление 3D-сцены
- Переключение камеры и ракурсов
Мебель с размерами, вращением и привязкой
После построения помещения пользователь наполнял его мебелью и оборудованием. Для каждого объекта можно было изменять ширину, глубину и высоту, задавать положение, вращать модель и фиксировать её на сцене.
Привязка рассчитывалась относительно координат стен и углов. Это помогало аккуратно размещать мебель вдоль границ помещения и собирать как небольшие интерьеры, так и насыщенные объектами планы.
- Каталог мебели и оборудования
- Изменение размеров и координат
- Перемещение, вращение и фиксация
- Привязка к стенам и углам
Пайплайн из Blender в Three.js
Часть объектов для каталога я моделировал и подготавливал в Blender. Через специальный плагин модели экспортировались в JSON-формат, после чего загружались в браузер и становились частью Three.js-сцены.
Такой процесс позволял расширять библиотеку мебели без ручного описания сложной геометрии в JavaScript и на практике связал работу с 3D-редактором и веб-рендерингом.
- Подготовка части моделей в Blender
- Экспорт через плагин в JSON
- Динамическая загрузка объектов
- Отображение моделей в WebGL-сцене
Открытая 3D-основа и собственный интерфейс
В качестве основы для механики планировщика я использовал форк открытого Three.js-проекта с GitHub. Я адаптировал его под собственную структуру интерфейса, пользовательские сценарии и логику взаимодействия с помещениями и объектами.
Панель управления и шаблоны интерфейса были реализованы на Pug и SCSS, логика — на нативном JavaScript, а Webpack отвечал за сборку проекта. В результате открытая основа превратилась в самостоятельный прототип с другим интерфейсом и расширенным набором сценариев.
- Адаптация форка под задачи проекта
- Нативный JavaScript и Three.js
- Pug и SCSS для интерфейса
- Webpack для сборки приложения
Планы, которые можно сохранить и продолжить позже
Состояние помещения, его геометрия и размещённые объекты сохранялись в JSON-файл. Пользователь мог загрузить этот файл позже и продолжить работу с ранее созданным планом.
Для меня проект стал первым глубоким погружением в 3D-разработку для браузера: я освоил Three.js, работу с координатами и камерой, загрузку моделей и сериализацию состояния сложной интерактивной сцены.
- Сохранение полного состояния плана
- Загрузка проекта из JSON-файла
- Продолжение редактирования после загрузки
- Практическое освоение Three.js