文件列表:

public/
src/
styles/
favicon.ico
index.html
main.js
package-lock.json
package.json

# 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 секунд левой кнопкой мыши на любой из объектов одного шестигранника открывается его "приближенный просмотр": создаётся новая сцена на основе данных выбранного шестигранника. При каждом открытии такой сцены шестигранник создаётся заново, кэши не используются.

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：