floorplan-3d помещает 2D-планировку и 3D-прогулку в один HTML-файл

floorplan-3d выглядит как обычный браузерный планировщик интерьера, однако технически проект устроен намного проще большинства подобных сервисов. Все приложение находится в одном index.html и написано на обычных HTML, CSS и JavaScript без отдельного фреймворка и этапа сборки. Файл можно открыть прямо в браузере или запустить через локальный HTTP-сервер.

В 2D-режиме есть план помещения с размерами в миллиметрах, библиотека более чем из 60 предметов мебели и бытовой техники, привязка объектов к стенам, изменение размеров, вращение и инструмент измерения. Отдельно отмечаются несущие стены, а ненесущие разрешено изменять. Слои с мебелью, сеткой, названиями комнат, размерами и стенами можно включать независимо друг от друга.

Клавиша T переключает проект в трехмерный режим на базе Three.js. Здесь доступны вид сверху, наклонная камера и прогулка от первого лица с управлением WASD. Двери можно открывать, мебель остается редактируемой, а изменения синхронизируются с двумерным планом. Есть переключение между полными и срезанными стенами, настройка положения солнца и ночное освещение.

Еще одна полезная часть связана с расчетами. floorplan-3d определяет площадь отдельных комнат и общую полезную площадь. Для пола можно выбрать материал и задать стоимость, после чего программа рассчитывает затраты с запасом 5% на отходы. Проект сохраняется в localStorage браузера, готовую схему можно вывести в PNG, а все данные экспортировать в JSON и позже загрузить обратно.

Но здесь проходит довольно четкая граница между готовым планировщиком и демонстрационным open-source инструментом. Собственный контур квартиры через интерфейс сейчас не создается. В репозитории floorplan-3d на GitHub автор прямо указывает, что комнаты, стены, окна, материалы и библиотека мебели задаются структурами ROOMS, WALLS, WINS, MATS и LIB внутри index.html. Чтобы перенести туда свою квартиру, эти данные придется изменить вручную.

Полностью автономным приложение тоже назвать нельзя. Двумерная часть хранится локально, но Three.js загружается через CDN jsDelivr, поэтому при первом открытии 3D-сцены требуется подключение к интернету. Сам проект распространяется по лицензии MIT.

За счет одного HTML-файла floorplan-3d можно сохранить локально, изменить под себя или разместить на собственном сервере без отдельного backend. Для быстрого наброска готового примера этого достаточно. Если нужен привычный конструктор, где стены своей квартиры рисуются мышью без работы с исходным кодом, текущая версия проекта такого сценария пока не дает.