https://github.com/loginchik/moscow-hex
3D glyph visualization of Moscow center cadastre buildings data
https://github.com/loginchik/moscow-hex
3d-graphics data-visualization threejs
Last synced: 3 months ago
JSON representation
3D glyph visualization of Moscow center cadastre buildings data
- Host: GitHub
- URL: https://github.com/loginchik/moscow-hex
- Owner: loginchik
- Created: 2024-03-24T00:11:09.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-31T18:33:36.000Z (almost 2 years ago)
- Last Synced: 2025-02-22T01:20:04.803Z (12 months ago)
- Topics: 3d-graphics, data-visualization, threejs
- Language: JavaScript
- Homepage: https://moscow-hex.vercel.app
- Size: 602 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Moscow HEX
_Основано на кадастровых данных, вдохновлено Uber, создано с помощью Three.js_.
## Структура проекта
```
.
├── public
│ ├── models
│ │ ├── bird.obj - модель птицы
│ │ ├── firstFloor.obj - модель первого этажа
│ │ ├── otherFloor.obj - модель любого этажа, кроме первого
│ │ ├── shop.obj - модель магазина
│ │ ├── shoppingCart.obj - модель магазинной тележки
│ │ └── treeTrunk.obj - модель ствола дерева
│ └── textures
│ ├── cartColor.png - текстура цвета магазинной тележки
│ ├── cartGloosy.png - текстура блестящего магазинной тележки
│ ├── firstFloor.png - текстура цвета первого этажа
│ ├── otherFloor.png - текстура цвета любого этажа, кроме первого
│ └── shopColor.png - текстура магазина
├── src
│ ├── cameras
│ │ ├── Manual_rotating_hex.js - камера с ручным вращением для просмотра шестигранника
│ │ ├── Manual_rotating_world.js - камера с ручным вращением для просмотра мира
│ │ └── Self_rotating_world.js - камера с автоматически вращением для просмотра мира
│ ├── world
│ │ ├── objects
│ │ │ ├── Bird.js - класс птицы
│ │ │ ├── Tree.js - класс дерева
│ │ │ ├── Building.js - класс здания: содержит строение и четыре дерева перед ним
│ │ │ ├── Shop.js - класс магазина: содержит строение и n-тележек перед ним
│ │ │ ├── Sun.js - солнце
│ │ │ └── Hex.js - класс шестигранника: содержит землю, два строения, магазин и стаю птиц
│ │ ├── Lights.js - скрипт, где создатся статичные света для освещения мира
│ │ └── World_scene.js - скрипт, где содержится дочений от Three.js/Scene класс мира
│ ├── colors.json - файл с цветами
│ ├── data.json - файл с данными
│ ├── worldInfoElements.js - файл с содержимым информации о проекте, которая выводится при просмотре мира
│ ├── Contents.js - скрипт, где создаются все объекты для рендера сцены
│ ├── Headers.js - скрипт, где создаются header-элементы для текущей сцены
│ ├── Loading.js - скрипт, где создаются объекты анимации загрузки проекта
│ ├── Manage_intersections.js - скрипт, где определяются пересечения мыши с шестигранниками при рендере мира
│ └── Renderer.js - скрипт, где создаётся ключевой обработчик
├── styles
│ └── styles.css - стили html-элементов
├── index.html - основной файл.
├── main.js - основной скрипт, импортируемый в html
├── package.json
├── package-lock.json
├── README.md
├── favicon.ico
└── .gitignore
```
Для запуска проекта:
```bash
npx vite
```
## Работа с данными и смысл глифов
Изначальные кадастровые данные о зданиях в пределах ЦАО Москвы поделены на шестигранники
по [системе h3](https://h3geo.org/docs) (уровень 7). В рамках каждого шестигранника посчитаны: средняя этажность зданий,
средний год постройки зданий, максимальная этажность, год постройки максимальной этажности, доля коммерческой
недвижимости и средняя кадастровая стоимость.
Средняя кадастровая стоимость впоследствии была нормализована в рамках имеющихся данных таким образом, чтобы
изначально минимальный показатель стал равен 0, изначально максимальный показатель — 1.
Эти данные используются для создания глифов. В одном глифе объекты следующие:
+ здание, этажность которого = средняя этажность. Перед зданием четыре дерева, на которых слева направо количество крон соответствует цифре года, = средний год постройки.
+ здание, этажность которого = максимальная этажность. Перед зданием четыре дерева, на которых слева направо количество крон соответствует цифре года, = год постройки самого высокого здания.
+ магазин, количество тележек перед которым, = доля коммерческой недвижимости * 10, округлённая до целого числа (от 1 до 10).
+ птицы над магазином, количество которых = нормализованная средняя кадастровая стоимость * 100.
Шестигранники расположены в соответствии с тем, как они располагаются на карте Москвы, для этого использованы
нормализованные от центра координаты (варьируются в диапазоне от -1 до 1).
## Мир
Мир состоит из подставки, набора шестигранников, построенных на данных, и солнца, которое летает строго с запада на
восток по окружности с радиусом, чтобы оно "заходило" в вертикальную грань подставки. Эти объекты создаются один раз
при первоначальной загрузке страницы, впоследствии используются кэши, если это возможно.
В основе солнца лежит сфера, текстура на нём — шейдер. В основе большинства объектов лежат заранее созданные в Blender
модели и текстуры, которые подгружаются с помощью Three.js. Анимации объектов создаются внутри кода.
При нажатии и удержании на протяжении 3.5 секунд левой кнопкой мыши на любой из объектов одного шестигранника
открывается его "приближенный просмотр": создаётся новая сцена на основе данных выбранного шестигранника. При каждом
открытии такой сцены шестигранник создаётся заново, кэши не используются.