Система 3D визуализации станции метро на базе HTML5 WebGL

HTML
Система 3D визуализации станции метро на базе HTML5 WebGL

xhload3d

www.hightopo.com
  Блог Парк :: титульная страница :: Бо спрашивает :: вспышка :: Новые оченки :: соединять :: подписка 订阅 :: управлять ::
175 очерков :: 1 статей :: 337 комментариев :: 0 ссылок
< февраль 2019 >
день один два три Четыре Пятерки шесть
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 1 2
3 4 5 6 7 8 9

объявление

Никнейм:xhload3d
Возраст сада:5 лет 2 месяца
вентилятор:356
Сфокусируйся на:0 +Добавить подписку

поиск

   

Самая используемая ссылка

Мои теги

Архив эссе

последний комментарий

Читать таблицу лидеров

Обзор лидеров

Рекомендуемая таблица лидеров

Система 3D визуализации станции метро на базе HTML5 WebGL

предисловие

Промышленный Интернет, Интернет вещей, визуализация и другие термины, уже знакомые нам в контексте информатизации, могут быть информатизированы для нас ежедневным транспортом, поездками, едой и одеждой и т. д. В традиционном визуальном мониторинге В полевых условиях , интерфейсная технология Web SCADA обычно используется для реализации 2D-визуального мониторинга.Эта система использует продукт Hightopo HT for Web для создания облегченной 3D-визуальной сцены.3D-сцена показывает реальную сцену станции метро спереди, включая Работа метро в режиме реального времени, подъем и опускание метро, ​​видеонаблюдение, пожарная сигнализация, работа лифта и т. д. помогают нам интуитивно понять текущую станцию ​​метро.

Чтобы помочь пользователям просматривать текущую станцию ​​​​метро более интуитивно и удобно, в системе предусмотрено три интерактивных режима:

  • Режим от первого лица — действие похоже на эффект движения пешехода или автомобиля, и вы можете управлять движением вперед и назад с помощью клавиатуры и мыши.
  • Автоматический режим проверки — в этом режиме пользователю не требуется никаких действий, и сцена автоматически перемещается вперед и назад для проверки сцены текущей станции метро.
  • Режим работы с мышью -- щелкните левой кнопкой мыши, чтобы повернуть сцену, щелкните правой кнопкой мыши, чтобы панорамировать сцену.

В этой статье объясняется построение сцены визуализации станции метро, ​​реализация кода анимации, принципиальный анализ интерактивного режима и реализация основных функциональных точек, чтобы помочь нам понять, как использоватьHTРеализуйте простую визуализацию станции метро.

Адрес предварительного просмотра:Система 3D визуализации станции метро на базе HTML5 WebGL woohoo.hightopo.com/demo/contract-subei…

Знакомство с интерфейсом и предварительный просмотр эффектов

Эффект работы метро.

Эффект метро снаружи станции внутрь заключается в том, что прозрачность постепенно увеличивается, а скорость постепенно уменьшается.

Эффект роуминга

Вышеупомянутый эффект роуминга автоматической проверки, и сцена автоматически вращается вперед.

Отслеживание взаимодействия с устройством

Когда мы нажимаем на устройство мониторинга в сцене, мы можем просмотреть текущую работу устройства, данные о работе и другую информацию.

Построение сцены

Большинство моделей в этой системе создаются с помощью моделирования 3dMax, который может экспортировать файлы obj и mtl.В HT все сложные модели в 3D-сценах могут быть созданы путем разбора файлов obj и mtl.Конечно, если это так, некоторые простые модели могут можно рисовать непосредственно с помощью HT, который легче, чем модель obj, поэтому в большинстве простых моделей используетсяHT for WebЛегкий продуктHTML5/WebGLСхема моделирования, конкретный код разбора выглядит следующим образом:

 1 // 分别为 obj 文件地址，mtl 文件地址
 2 ht.Default.loadObj('obj/metro.obj', 'obj/metro.mtl', {
 3     center: true,
 4     // 模型是否居中，默认为 false，设置为 true 则会移动模型位置使其内容居中
 5     r3: [0, -Math.PI / 2, 0],
 6     // 旋转变化参数，格式为 [rx, ry, rz]
 7     s3: [0.15, 0.15, 0.15],
 8     // 大小变化参数，格式为 [sx, sy, sz]
 9     finishFunc: function(modelMap, array, rawS3) {
10         if (modelMap) {
11             ht.Default.setShape3dModel('metro', array); // 注册一个名字为 metro 的模型
12         }
13     }
14 });

После загрузки модели obj, указанной выше, имя регистрируется какmetroМодель, то, если вы хотите использовать модель, вы можете использовать следующий код для достижения:

1 var node = new ht.Node();
2 node.s({
3     'shape3d': 'metro'
4 });

Приведенный выше код создает новыйnodeобъект, установив стиль объектаshape3dСвойства могут моделировать имяmetroИспользуйте объект узла, а затем в нашей сцене появится модель поезда метро.

Анализ кода анимации

Анализ реализации кода Subway Animation

Работа метро в сцене реализована через плагин планирования, предоставленный HT.расписаниеДля конкретного использования, пожалуйста, обратитесь к HT для Интернета.Руководство по расписаниюЭто планирование в основном используется для обработки обратного вызова в указанный интервал времени. Первым параметром функции обратного вызова является элемент DATA, который является узлом модели в 3D-сцене. Мы можем определить, являются ли текущие данные DATA только что созданным Metro. Этот узел приходит с последующими операциями, и сцена моделируется с левым метро и правым открытым метро, ​​и появляются два метро. В 3D-сценарии будет система координат.В HT используйте x, y, z для представления трех осей, поэтому движение метро определенно меняет положение метро в системе координат для достижения работы метро. , координаты метро указаны ниже.

Из приведенного выше рисунка вы можете узнать систему координат метро в 3D-сцене.Если вы хотите реализовать движение метро, ​​вам нужно только переместить метро в направлении красной стрелки, показанной на рисунке, что являетсяxНаправление оси, черезsetXЭтот метод постоянно изменяет положение метро для достижения цели проезда в метро. В коде используются два метода getSpeedByX и getOpacityByX для непрерывного получения скорости поезда и прозрачности поезда в это время. Ниже приведена ключевая реализация кода. :

 1 let metroTask = {
 2     interval: 50,
 3     // 每五十秒执行一次
 4     action: (data) = >{ // 即上文所提回调函数
 5         // 判断当时传进来的节点是否为地铁列车节点
 6         if (data === currentMetro) {
 7             // 获取地铁此时的 X 轴位置以及行进的方向
 8             let currentX = data.getX(),
 9             direction = data.a('direction');
10             // 根据当前的 X 轴位置获取当前的列车速度
11             let speed = this.getSpeedByX(currentX);
12             // 根据当前的 X 轴位置获取当前的列车透明度
13             let opacity = this.getOpacityByX(currentX);
14             // 判断此时 X 轴位置是否超过某个值 即地铁是在某个范围内移动
15             if (Math.abs(currentX) <= 5000) {
16                 // 设置当前的透明度
17                 opacity !== 1 ? currentMetro.s({
18                     'shape3d.transparent': true,
19                     'shape3d.opacity': opacity
20                 }) : currentMetro.s({
21                     'shape3d.transparent': false
22                 });
23                 // 设置当前的 X 轴位置
24                 data.setX(currentX + direction * speed);
25                 // 判断此时地铁的速度为 0，所以此时应该执行开门的动画
26                 if (speed === 0) this.doorAnimation(currentMetro, direction);
27             }
28             // 右方向地铁开到头，进行复位
29             if (currentX > 5000 && direction === 1) {
30                 currentMetro = leftMetro;
31                 currentMetro.setX(5000);
32             }
33             // 左方向地铁开到头，进行复位
34             if (currentX < -5000 && direction === -1) {
35                 currentMetro = rightMetro;
36                 currentMetro.setX( - 5000);
37             }
38         }
39     }
40 };
41 dm3d.addScheduleTask(metroTask);

С помощью приведенного выше кода мы можем узнать, что метро находится в процессе работы, в основном путем изменения метро.xПоложение оси используется для создания прямой анимации, и метро должно двигаться в определенном интервале, и необходимо оценивать границу, а для имитации реального эффекта необходимо постоянно получать текущую скорость поезда и прозрачность поезда в соответствии с текущим положением метро. Ниже приведен процесс. картина:

На приведенной выше картинке показан процесс, когда метро входит в станцию. Когда метро останавливается и закрывает дверь, ему необходимо выйти из станции. В это время нам нужно только сбросить положение метро, ​​чтобы не было 0. Следующее является частью Из реализации кода:

1 currentMetro.setX(direction * 10); // 设置出站列车的位置

Когда вышеуказанный код выполнен, вышеупомянутыйmetroTaskСкорость, полученная после выполнения задачи планирования в метод getSpeedByX, не равна 0, поэтому анимация метро будет продолжать выполняться в это время, скорость от медленной до быстрой, а прозрачность от глубокой к мелкому. Ниже приведен алгоритм выполнения анимации открытия двери:

Анализ реализации кода автоматической проверки

Реализация автоматической проверки в системе в основном осуществляется путем измененияeye так же какcenterзначение ,HTпредоставлено вrotate,walkДва метода управления вращением перспективы и развитием перспективы,rotateКогда метод не в режиме от первого лица, вращениеcenterВращение вокруг центра, то есть вращение вокруг центрального объекта.Когда это первое лицо, вращениеeyeПоверните к центру, то есть поверните глаза в сторону направления.walkфункция меняется одновременноeye а такжеcenterДолжность, то естьeye а такжеcenterОдновременно переместите такое же смещение в направлении вектора, установленного двумя точками. я не пользовался этой системойrotateФункция реализует поворот перспективы сама по себе, т.к. Функция поворота поворачивает на определенный угол, и он будет вращаться сразу без процесса поворота, поэтому я повторно реализовал метод поворота.В этой системе угол обзора поворачивается путем постоянного измененияcenterКонкретный принцип процесса реализации показан на следующем рисунке:

Часть кода реализации выглядит следующим образом:

 1 rotateStep() {
 2     // 即上图辅助点 C
 3     let fromCenter = this.fromCenter;
 4     // 即上图 B 点
 5     let toCenter = this.toCenter;
 6     // 每帧转一度
 7     let rotateValue = this.rotateFrame || Math.PI / 180;
 8     // 辅助点 C 与 B 点之间建立一个方向向量
 9     let centerVector = new ht.Math.Vector2(toCenter.x - fromCenter.x, toCenter.y - fromCenter.y);
10     let centerVectorLength = centerVector.length();
11     // 此时旋转百分比
12     let rotatePercent = rotateValue * this.stepNum / this.curRotateVal;
13     if (rotatePercent >= 1) {
14         rotatePercent = 1;
15         this.stepNum = -2;
16     }
17     let newLength = rotatePercent * centerVectorLength;
18     centerVector.setLength(newLength);
19     let newCenterVector = centerVector.add(fromCenter);
20     // 获取旋转过程中 center 的点信息
21     let newCenterPosition = [newCenterVector.x, this.personHeight, newCenterVector.y];
22     // 设置当前 center 的大小
23     this.g3d.setCenter(newCenterPosition);
24 }

С помощью приведенного выше кода реализуется вращение перспективы в сцене, и его можно изменить, изменивrotateValueЗначение контролирует скорость вращения.

Анализ реализации кода анимации лифта

В сцене лифт представляет собой obj-модель, а 3D-модель состоит из самых простых граней треугольника.Например, прямоугольник может состоять из 2 треугольников, а куб может состоять из 6 граней или 12 треугольников, и и т. д. Модели могут состоять из множества маленьких треугольников. Следовательно, определение 3D-модели — это описание всех треугольников, из которых построена модель, и каждый треугольник состоит из трех вершин, каждая вершина определяется трехмерными координатами x, y и z, которые используются в ХТ.vsМассив записывает координаты всех вершин, составляющих треугольную поверхность, поэтому, если вы хотите, чтобы лифт работал, вам нужно всего лишь перевести все координаты вершин в направлении лифта.Ниже приведены некоторые ключевые псевдокоды:

 1 // vs 指的是构成电梯模型所有的三角面顶点坐标数组
 2 // 由于场景中电梯的运行方向为往对角线右上方运动，所以只需要修改 x 轴以及 y 轴坐标值
 3 // xStep yStep 为每次电梯运动的距离
 4 setInterval(() = >{
 5     // i+3 是因为 vs 数组的顺序为 x, y, z 轴 所以每次 i 偏移三个单位大小
 6     for (let i = 0, l = vs.length; i < l; i = i + 3) {
 7         // 该顶点坐标下一个 x 轴坐标的值
 8         let nextX = vs[i] - xStep;
 9         // 该顶点坐标下一个 y 轴坐标的值
10         let nextY = vs[i + 1] + yStep;
11         vs[i] = nextX < -0.5 ? 0.5 - (Math.abs(nextX) - 0.5) : nextX;
12         vs[i + 1] = nextY > 0.5 ? -0.5 + (Math.abs(nextY) - 0.5) : nextY;
13     }
14 },
15 200);

Анимация движения лифта показана на следующем рисунке:

Отображение функции мониторинга и введение

Видеонаблюдение

Когда камера в сцене щелкнута, экран мониторинга текущей камеры будет отображаться в правом верхнем углу сцены.Ниже приведена диаграмма эффекта:

мониторинг дымовой сигнализации

Детектор дыма изменит цвет текущей модели пожарного извещателя в соответствии со значением состояния, передаваемым в режиме реального времени с фона.Красный цвет — это состояние тревоги.Схема эффекта:

Телевизионный мониторинг времени прибытия поезда

В ежедневных станциях метро будет специальное телевидение, чтобы показать расписание следующего прибытия метро.Система также имитирует этот эффект.Однако система временно сделала телевизионную модель, и время не подключено.Следующее является рендеринг:

взаимодействие при наблюдении за сценой

Взаимодействие в 3D-сцене относительно простое.Главное - щелкнуть камеру, чтобы отобразить панель 2D-мониторинга.В 2D-интерфейсе в основном переключаются три режима взаимодействия.Три режима взаимодействия являются взаимоисключающими.Следующее - 3D код события регистрации взаимодействия:

 1 g3d.mi((e) = >{
 2     let {
 3         g2d,
 4         dm2d
 5     } = this;
 6     // 为点击类型
 7     if (e.kind === 'clickData') {
 8         // data 为当前点击的图元
 9         let data = e.data;
10         // 当前图元的 shape3d 类型
11         let shape3d = data.s('shape3d');
12         // 判断当前 shape3d 类型是否为摄像头
13         if (shape3d && shape3d.indexOf('摄像头') > 0) {
14             let cameraPanel = dm2d.getDataByTag('cameraPanel');
15             // toggle 切换摄像头 2d 面板
16             g2d.isVisible(cameraPanel) ? cameraPanel.s('2d.visible', false) : cameraPanel.s('2d.visible', true);
17         }
18     }
19     // 为点击 3d 场景背景类型
20     if (e.kind === 'clickBackground') {
21         let cameraPanel = dm2d.getDataByTag('cameraPanel');
22         // 隐藏摄像头 2d 面板
23         g2d.isVisible(cameraPanel) && cameraPanel.s('2d.visible', false);
24     }
25 });

Суммировать

Промышленный Интернет соединяет людей, данные и машины. Система 3D-визуализации станций метро является хорошей демонстрацией. Легкость HT, визуализация данных, визуализация машин и управление активами помогают нам лучше контролировать. Интернет вещей будет собирать информацию в режиме реального времени с помощью различных устройств восприятия информации, таких как любые объекты или процессы, которые необходимо контролировать, подключать и взаимодействовать.Благодаря сочетанию с HT он лучше покажет преимущества визуализации.Конечно , станции метро также СVRВ совокупности мы можем увидеть различные виды технологических выставок в разных местах.VRсценическая операция,HTтакже можно комбинировать вVRЧтобы управлять устройством, вы можете носить устройство, чтобы бродить по станции метро, ​​давая людям ощущение погружения.Из-за легкого веса самой сцены, поэтомуVRБеглость в сцене также очень высока, так что у пользователей не будет кружиться голова. Разумеется, сама система может работать и на мобильном терминале.Ниже приведен скриншот мобильного терминала:

Скрин запущенной программы:

posted on 2019-02-18 08:26 xhload3dЧитать(57) Комментарии(0)редактировать собирать обновить комментарийобновить страницуBack to topЗарегистрированные пользователи могут оставлять комментарии только после авторизации.Авторизоватьсяилирегистр,доступдомашняя страница сайта.[Рекомендуется] Полный исходный код открыт: крупномасштабная конфигурация\промышленный контроль\мониторинг моделирования мощности CAD скачать бесплатно 2019!
[Рекомендуется] Профессиональный и удобный сервис хостинга кода корпоративного уровня — Gitee Code Cloud

Powered by:
Блог Парк
Copyright © xhload3d

Категории