Схема территории — 2D ⇄ 3D

Редактор генплана территории в браузере: рисуете план сверху в 2D, одной кнопкой смотрите его объёмной моделью в 3D. Один HTML-файл без сборки, без зависимостей, без сервера — открывается двойным кликом.

Открыть онлайн → margoliok.github.io/plan-editor

---

Что умеет

2D — план

• Перетаскивание объектов мышью с привязкой к сетке 0,5 м
• Изменение размеров за угол — с учётом поворота объекта
• Поворот на произвольный угол: ручкой на плане, полем ввода или клавишей
• Порядок слоёв: перетаскиванием строк в списке, кнопками или с клавиатуры
• Сетка 5 м, размеры участка, подписи объектов прямо на плане
• Зум колесом, панорама правой кнопкой

3D — модель

• Модель собирается из плана автоматически при переключении режима
• Мягкие тени, направленный «солнечный» свет, изометрия и вид сверху
• Плавающие подписи объектов, привязанные к их положению
• Скриншот сцены в PNG одной кнопкой

Данные

• Всё хранится в простом plan.json — читается и правится руками
• Загрузка и сохранение файла плана
• Формат обратно совместим: файлы без поля поворота открываются как есть

---

Типы объектов

Тип	kind	Высота по умолчанию	Как выглядит в 3D
Здание	bldg	4 м	Коробка с плоской кровлей (кровля при высоте > 2 м)
Газон	lawn	0,18 м	Низкая зелёная плита
Спортплощадка	sport	0,22 м	Низкая плита кирпичного цвета
Плац / покрытие	pave	0,16 м	Низкая серая плита
Парковка	park	0,14 м	Плита с белой разметкой машиномест по ~2,5 м
Беседка	gazebo	3 м	Восьмигранный настил, восемь стоек, коническая крыша
Дерево	tree	6 м	Ствол-цилиндр и вытянутая крона-сфера

Разметка парковки делится по длинной стороне и поворачивается вместе с объектом.

---

Управление

Мышь

Действие	Как
Выбрать объект	Клик по нему на плане
Переместить	Тащить объект
Изменить размер	Тащить за угловой маркер
Повернуть	Тащить кружок над объектом
Повернуть кратно 15°	Shift + тащить кружок
Зум	Колесо
Сдвинуть холст	Правая кнопка
Вращать камеру в 3D	Левая кнопка

Клавиатура

Клавиша	Действие
← → ↑ ↓	Сдвинуть объект на 1 м
Ctrl + ↑ / ↓	Слой выше / ниже
R	Повернуть на +15°
Shift + R	Повернуть на −15°
Del	Удалить объект
Esc	Снять выделение

---

Формат plan.json

{
  "site": { "w": 72, "d": 76 },
  "objects": [
    {
      "name": "Штаб",
      "x": 14, "z": 6,
      "w": 40, "d": 28, "h": 10,
      "kind": "bldg",
      "rot": 0
    }
  ]
}

Поле	Описание
site.w / site.d	Ширина и глубина участка в метрах
name	Подпись. Пустая строка — объект без подписи
x / z	Левый верхний угол объекта в метрах от угла участка
w / d	Ширина и глубина в метрах
h	Высота в метрах (влияет только на 3D)
kind	Тип из таблицы выше
rot	Поворот в градусах по часовой стрелке вокруг центра. Необязательное, по умолчанию 0

Важная деталь: x, z, w, d всегда хранятся в неповёрнутой системе координат. Поворот накладывается поверх — при отрисовке, при попадании мышью и при сборке 3D. Поэтому объект можно свободно крутить, не теряя его исходных габаритов.

Порядок объектов в массиве — это порядок слоёв. Кто позже в списке, тот рисуется поверх остальных и первым ловит клик мыши.

---

Откуда берутся данные

Основной план — plan.json в корне репозитория. Он же продублирован константой PLAN внутри plan-editor.html, и это не дублирование ради дублирования:

• Открыли файл двойным кликом (file://) — браузер запрещает fetch к локальным файлам, поэтому работает вшитая копия;
• Открыли через сервер или GitHub Pages (http://) — подтягивается plan.json с диска и перекрывает вшитую копию.

Так редактор работает в обоих случаях. Обе версии данных синхронны.

---

Запуск локально

Достаточно открыть plan-editor.html двойным кликом.

Если хотите, чтобы правки в plan.json подхватывались автоматически, поднимите любой статический сервер в папке проекта:

python -m http.server 8000
# затем откройте http://localhost:8000/plan-editor.html

---

Структура

├── index.html          — титульная страница для GitHub Pages
├── plan-editor.html    — сам редактор, весь код здесь
├── plan.json           — план территории, основной источник данных
├── фото.jpg            — исходный чертёж от руки, с которого всё началось
└── docs/               — скриншоты для README

Редактор целиком укладывается в один файл: разметка, стили и логика без сборки и пакетного менеджера. Единственная внешняя зависимость — three.js r128 с CDN, и нужна она только для 3D-режима.

---

Исходный чертёж

Цифровой план собран с рисунка от руки — он лежит в репозитории как фото.jpg: