3D-визуализация доменного производства чугуна промышленной конфигурации на большом экране на основе HTML5

HTML
3D-визуализация доменного производства чугуна промышленной конфигурации на большом экране на основе HTML5

предисловие

Большие данные популярны сейчас, визуализация данных большого экрана также стала горячей темой. Большая визуализация экрана может быть использована в многочисленных областях, таких как промышленный интернет, медицинский, транспорт, промышленный контроль и т. Д. Важные данные показателя проявляются на странице в диаграмме, различной графике и т. Д., И различные данные наглядят. Поскольку браузер постоянно разрабатывается, это не новая вещь для использования в Интернете, чтобы сделать большой экран. На рынке было много крупноэкранных решений, большинство из которых представлены в виде различных диаграмм и в основном 2D презентация. Некоторые разработаны в зависимости от пропорции экрана запуска и не могут быть адаптивны к другим пропорциям экрана. Я узнал недавно.HightopoHT для веб-продукта, уникальный вектор, неудовлетворенный в различных пропорциях, а также механизм компоновки, решает проблему отображения при различных соотношениях экрана, а также часть 3D-рендеринга, может создать уникальную систему с большим экраном. Здесь, чтобы поделиться с вами обучением, сначала перейдите к пояснительным изображениям:

Связь:woohoo.hightopo.com/demo/large-…

Основное содержание этой статьи следующее: В статье HT используется как аббревиатура от HT for Web:

  1. построение страницы
  2. Стыковка данных
  3. Реализация анимационного эффекта
  4. Оптимизация других деталей

1. Структура страницы

В этой системе нам нужно создать ht.graph.GraphView и ht.graph3d.Graph3dView для рендеринга 2D- и 3D-контента. Display.json, предоставленный дизайнером, представляет собой содержимое 2D-рисунков, которые в основном визуализируются с использованием векторного рисования.Некоторые диаграммы используют Echarts, и HT также имеет механизм, позволяющий нам их использовать. scene.json — это содержимое 3D-сцены. Большинство моделей создаются с помощью моделирования 3dMax. Этот инструмент моделирования может экспортировать файлы obj и mtl. В HT все сложные 3D-сцены могут быть созданы путем анализа файлов obj и mtl. , простые модели также могут быть смоделированы с помощью HT. Код ключа следующий:

var g2d = new ht.graph.GraphView();
var g3d = new ht.graph3d.Graph3dView();

// 将 3D 组件加入到 body 下
g3d.addToDOM();
// 将 2D 组件加入到 3D 组件的根 div 下，父子 DOM 事件会冒泡，这样不会影响 3D 场景的交互
g2d.addToDOM(g3d.getView());

g2d.deserialize('display.json', function(json, dm, g2d, datas){
     // TODO 2D 反序列化完成回调，后面会讲到
});
g3d.deserialize('scene.json', function(json, dm, g3d, datas) {
     // TODO 3D 反序列化完成回调，后面会讲到});

2. Соединение для передачи данных

​После загрузки страницы она может обмениваться данными с фоном и запрашивать связанные данные для подключения к соответствующему элементу. Одной из сильных сторон HT является то, что он настроен как Web, поэтому существует очень удобный метод привязки данных, и мы можем легко отображать данные для каждого узла. В нашем случае для имитации отображаемых данных используется метод имитации случайных чисел, а для соответствующего узла в json устанавливается уникальный идентификационный тег, после завершения десериализации соответствующий узел получается через g2d.dm().getDataByTag (тег), а затем в соответствии с привязкой данных этого узла для отображения данных на узле.

Ниже приведен код для подключения вышеуказанных табличных данных, а его тег — alarmTable.

// 模拟数据
var mockData = [
    { "time": "2019-02-17 21:54:31", "warningDesc": "11_15冷却壁发生渣皮减薄" },
    { "time": "2019-02-17 21:57:49", "warningDesc": "炉缸热损失正常" },
    { "time": "2019-02-17 22:00:34", "warningDesc": "8_12冷却壁发生渣皮减薄" },
    { "time": "2019-02-17 22:03:44", "warningDesc": "8_12冷却壁发生渣皮减薄" },
    { "time": "2019-02-17 22:07:09", "warningDesc": "11_15炉缸热损失正常" },
    { "time": "2019-02-17 22:11:35", "warningDesc": "8_12冷却壁发生渣皮减薄" },
    { "time": "2019-02-17 22:16:24", "warningDesc": "11_15局部小气流" }
];

var dm = g2d.dm();
var table = dm.getDataByTag('alarmTable');
table.a('ht.dataSource', mockData);

Приведенная выше таблица представляет собой векторный узел, определенный ht. Вектор состоит из компонентов. Компоненты могут не только предопределять прямоугольники, тексты и т. д., но также ссылаться на другие определенные векторы и даже настраивать логику рисования. Эта таблица состоит Вот идет. Векторы можно использовать не только в 2D-чертежах, но и в 3D-текстурах.В нашей 3D-сцене несколько панелей на следующих скриншотах также реализованы с использованием векторов,

Данные в HT управляются DataModel, поэтому данные стыковки 3D такие же, поэтому я не буду здесь вдаваться в подробности.

3. Реализация анимационного эффекта

  • Анимация горячего металлического танкера

Наиболее очевидной анимацией в этом случае должна быть анимация танкера с расплавленным железом.Давайте сначала поговорим о ее реализации. Основной процесс такой

Как и выше, мы по-прежнему получаем объект узла танкера с расплавленным железом через car = g3d.dm().getDataByTag('car'); после завершения десериализации.

Через car.s('3d.visible', true | false) можно управлять его отображением и скрытием.

Эффекта смещения можно добиться, непрерывно изменяя 3D-координаты узлов car.setPosition3d(x, y, z);

Что касается панели на танкере жидкого железа, то она тоже является вектором, если она адсорбирована на узле танкера жидкого железа, то она будет двигаться вместе с машиной, и нет необходимости индивидуально контролировать ее координаты для достижения анимации.

  • Анимация течения газа в трубе

Эта часть эффекта анимации может быть достигнута, пока значение uv текстуры постоянно изменяется.Ниже приведен пример кода, узел по-прежнему получается с помощью getDataByTag

var offset1 = 0.03;

setInterval(function () {
    node.s({
        'top.uv.offset': [-offset1, 0],
        'front.uv.offset': [-offset1, 0],
    });
    offset1 += 0.1;
}, 100);

Точно так же реализована анимация кормовой дорожки.

В-четвертых, оптимизация других деталей

При нажатии 2D-точки на примитивный пиксель мы не хотим запускать 3D-взаимодействие.Например, при перетаскивании таблицы для прокрутки 3D-сцена также будет вращаться. Им можно управлять с помощью следующего кода:

var handler = function(e) {
    if (gv.getDataAt(e)) { // 如果点击到的位置有节点信息
        e.preventDefault();
        e.stopPropagation();
    }
}
gv.getView().addEventListener('mousedown', handler);
gv.getView().addEventListener('click', handler);
gv.getView().addEventListener('touchstart', handler);

Кроме того, отключите некоторые взаимодействия и некоторые установленные по умолчанию границы.

// 选中边框为0
gv.getSelectWidth = function () { return 0; };
// 禁止鼠标缩放
gv.handleScroll = function () { };
// 禁止 touch 下双指缩放
gv.handlePinch = function () { };
// 禁止平移
gv.setPannable(false);
// 禁止框选
gv.setRectSelectable(false);
// 隐藏滚动条
gv.setScrollBarVisible(false);
// 2D 中所有节点不可拖动
gv.setMovableFunc(function () { return false; });
// 3D 中所有节点不可拖动
g3d.setMovableFunc(function () { return false; });

Суммировать

Благодаря большому экрану, сочетающему 2D и 3D, вы можете очень интуитивно видеть представление данных, например, данные, поступающие от сканера.Благодаря его положению вам не нужно слишком много текстового описания, чтобы знать, что отображать здесь. HT очень легкий и может быть объединен с 2D и 3D для представления данных.Вектор не искажается под различными экранами, а также может отображаться на экранах разных размеров.Он идеально подходит для визуализации на большом экране. В дополнение к большому экрану он может хорошо отображаться на компьютере, а также поддерживается мобильный терминал Наконец, размещен рендеринг мобильного терминала.


Категории