Основано на кадастровых данных, вдохновлено 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
Для запуска проекта:
npx vite Изначальные кадастровые данные о зданиях в пределах ЦАО Москвы поделены на шестигранники по системе h3 (уровень 7). В рамках каждого шестигранника посчитаны: средняя этажность зданий, средний год постройки зданий, максимальная этажность, год постройки максимальной этажности, доля коммерческой недвижимости и средняя кадастровая стоимость.
Средняя кадастровая стоимость впоследствии была нормализована в рамках имеющихся данных таким образом, чтобы изначально минимальный показатель стал равен 0, изначально максимальный показатель — 1.
Эти данные используются для создания глифов. В одном глифе объекты следующие:
- здание, этажность которого = средняя этажность. Перед зданием четыре дерева, на которых слева направо количество крон соответствует цифре года, = средний год постройки.
- здание, этажность которого = максимальная этажность. Перед зданием четыре дерева, на которых слева направо количество крон соответствует цифре года, = год постройки самого высокого здания.
- магазин, количество тележек перед которым, = доля коммерческой недвижимости * 10, округлённая до целого числа (от 1 до 10).
- птицы над магазином, количество которых = нормализованная средняя кадастровая стоимость * 100.
Шестигранники расположены в соответствии с тем, как они располагаются на карте Москвы, для этого использованы нормализованные от центра координаты (варьируются в диапазоне от -1 до 1).
Мир состоит из подставки, набора шестигранников, построенных на данных, и солнца, которое летает строго с запада на восток по окружности с радиусом, чтобы оно "заходило" в вертикальную грань подставки. Эти объекты создаются один раз при первоначальной загрузке страницы, впоследствии используются кэши, если это возможно.
В основе солнца лежит сфера, текстура на нём — шейдер. В основе большинства объектов лежат заранее созданные в Blender модели и текстуры, которые подгружаются с помощью Three.js. Анимации объектов создаются внутри кода.
При нажатии и удержании на протяжении 3.5 секунд левой кнопкой мыши на любой из объектов одного шестигранника открывается его "приближенный просмотр": создаётся новая сцена на основе данных выбранного шестигранника. При каждом открытии такой сцены шестигранник создаётся заново, кэши не используются.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent