Библиотека для создания плана помещения
Единицы измерения – миллиметры.
Задача разбивается на несколько этапов.
Этап №1 работа со сценой. На этом этапе необходимо создать сцену, на которой располагается плоскость THREE.PlaneGeometry. Добавить камеру с возможностью перемещения кнопками wasd и вращения мышкой + zoom.
Необходимо:
- 1)поддержать экспорт в json формат и импорт сцены с объектами из него.
- 2)На сцене расположить панель с кнопками управления
Необходимо иметь возможность масштабирования плана помещения и его вращения относительно плоскости. Для удобства масштабирования используется 2 инструмента
Линейка - используется если на плане помещения известен размер стены. Тога пользователь отмеряет 2 точки на плане помещения и вносит реальный размер, например, 4700 мм. После нажатия на кнопку масштабировать план помещения увеличивается таким образом, чтобы указанное расстояние было равно 4700 мм. Пользователь может указать не только ширину, но и высоту (случай, когда план помещения искажен). Тогда рисунок растягивается как в ширину, так и в высоту.
Четырехугольник – используется в случае, когда на плане указана только площадь помещения, а длина стен неизвестна. Данный расчет возможен, когда искажения по длине и ширине нет.
Пользователь рисует четырехугольник и указывает его реальную площадь, например, 16.3 м2
Далее программа вычисляет площадь нарисованного четырехугольника по формуле: http://2mb.ru/matematika/geometriya/ploshhad-chetyrexugolnika/
После чего вычисляется поправочный коэффициент (реальная площадь делится на вычисленную и находится квадратный корень от значения)
На этот поправочный коэффициент и умножается ширина и высота плана помещения.
Этап №3 рисование стен Для начала пользователь рисует внешние стены. Для этого он кликает по углам внешних стен. Каждый клик образует вершину многоугольника. Клик по последней вершине заканчивает создание многоугольника. Далее пользователь может подкорректировать вершины передвигая их влево или вправо. Закончив создание многоугольника, он нажимает на кнопку рисовать стены. Программа по линиям многоугольника рисует стены. Далее пользователь корректирует ширину стен либо через панель управления, либо через сами стены.
При этом если выбрано 2 стены или более стен, то пользователь задает ширину этих стен.
По завершению создания внешних стен, пол закрашивается текстурой пола.
пример рисования стен можно взять отсюда https://planner5d.com/ru/editor/
По функционалу, должна быть возможность резать стену на части, изменять ее ширину как влево, так и вправо или в обе стороны.
Стены должны притягиваться друг к другу и к сетке, как сделано в примере https://planner5d.com/ru/editor/
Необходимо иметь возможность удаления стен или делать их не видимыми – функционал поддерживается в three.js остается только контур стены.
По окончании рисования внешних стен пользователь рисует внутренние стены.
Для этого он выбирает инструмент рисовать стену и ставит 2 точки. Между этими двумя точками рисуется стена.
Необходимо иметь возможность изменения высоты стены для всего помещения.
При клике на каждой стене необходимо подсвечивать ее цветом.
Этап №4 рисование проёмов, углублений или неровностей стен Рисование производится в режиме 3D. Пользователь выбирает стену и рисует на ней многоугольник. Далее он либо нажимает на кнопку удалить часть стены, либо тянет за стену, либо вдавливает ее внутрь.
По окончании редактирования должен получиться многоугольник со множеством вершин в каждом углу.