предисловие
Под влиянием промышленного Интернета и Интернета вещей люди выдвинули более высокие требования к управлению машинами, визуализации машин и визуализации операций машин. Как полностью отобразить работу машин, траекторию машин или механические движения машин в системе, особенно важно, потому что это поможет новичку, который не знаком с машинами, интуитивно понять работу машин. , и все возможные действия машины, длятри одинИли другие отечественные и иностранные компании тяжелого машиностроения могут иметь лучшую демонстрацию или продвижение.
экскаватор, также известный какЭкскаваторная техника, Судя по развитию строительной техники в последние годы, развитие экскаваторов идет относительно быстро, и экскаваторы стали одной из самых важных строительных машин в инженерном строительстве. Таким образом, система реализует 3D-визуализацию экскаватора, которая обычно основана на традиционной промышленности.Web SCADAПередняя технология используется для реализации визуального 2D-мониторинга, и все это является частью мониторинга данных 2D-панели.Данные получаются из фона, а данные отображаются на переднем плане.Однако для самого экскаватора, модель экскаватора, действие экскаватора и работа экскаватора визуализируются, но это более привлекательно, поэтому система визуализирует действие 3D-модели экскаватора, которая обычно включает в себя следующие аспекты:
- Вперед и назад. Пользователь может использовать клавиатуру wasd для перемещения вперед и назад или щелкать 2D-интерфейс WASD для перемещения экскаватора вперед и назад.
- Вращение корпуса — пользователь может вращать корпус с помощью левой и правой клавиш на клавиатуре или щелкнуть в 2D-интерфейсе , чтобы повернуть корпус экскаватора.
- Вращение стрелы — пользователь может щелкнуть первую часть ползунка 2D-интерфейса, чтобы повернуть стрелу.
- Вращение предплечья — пользователь может щелкнуть вторую часть ползунка 2D-интерфейса, чтобы повернуть предплечье.
- Экскавация ковша — пользователи могут щелкнуть третью часть ползунка 2D-интерфейса, чтобы реализовать вращающуюся экскавацию части ковша.
- Анимация экскаватора. Пользователь может щелкнуть значок лопаты в 2D-интерфейсе, и после нажатия система последовательно отобразит несколько анимаций самого экскаватора.
В этой статье объясняется построение сцены визуализации экскаватора и реализация кода механического действия экскаватора, чтобы помочь нам понять, как его использовать.HTРеализовать визуализацию экскаватора.
Адрес предварительного просмотра:Приложение для 3D-визуализации экскаватора на основе HTML5 WebGL woohoo.hightopo.com/demo/contract-amount разница…
предварительный просмотр эффекта интерфейса
Эффект механического движения экскаватора
Несколько основных действий экскаватора можно увидеть на картинке выше.
Эффект движения ковша экскаватора
Третий ползунок скользящей страницы управляет поворотной выемкой ковша.
Движение кузова экскаватора
На изображении выше вы можете увидеть движение экскаватора вперед и назад и вращение фюзеляжа.
Построение сцены
Все фигуры в этой 3D-сценеHTВнутреннийстенаинструмент для построения, установив свойство прозрачности стеныshape3d.transparentУстановите значение true и сопоставьте построенную стену, чтобы создать эффект отображения похожих зданий в сцене.книга стиля, эффект сцены:
На изображении выше мы видим, что в сцене много стенных зданий, поэтому у них много общего, например, стили и текстуры одинаковы, поэтому вHTсквозьпартияОперация обработки этих стен в пакетном режиме означает, что примитивы стен в текущем необработанном случае представляют собой независимо отрисованные модели, поэтому производительность будет относительно низкой, и когда пакет примитивов агрегируется в один Когда за один раз отрисовывается большая модель , это значительно улучшит производительность обновления WebGL. Это то, что нам нужно делать в пакетном режиме. Подробности см.HTизМассовое руководство.
2D-панельная часть системы такжеHTизвекторДля рисования часть панели в основном включает текущее состояние работы экскаватора, рабочее время, информацию о гарантии, информацию о неисправностях и т. д. и отображает эти данные в двумерном виде.
Анализ кода механического движения
Действие экскаватора в этой системе очень важно и критично: как должен двигаться гидравлический рычаг при движении верхнего и нижнего плеча, и как связаны гидравлический рычаг, части вращающегося наконечника и части, соединенные с ковшом, при движении ковш перемещается. Точка, большая часть математических знаний используется в механической анимации для расчета точки и положения поверхности. Ниже приведены несколько ключевых математических знаний в качестве основы:
В математикевектор(также известный как геометрический вектор, вектор), величина, имеющая величину и направление. Визуально его можно представить в виде отрезка со стрелкой. В системе вектор, перпендикулярный некоторой поверхности, то есть вектор нормали, будет вычисляться векторным произведением векторов.При расчете поворота ковша вектор нормали, перпендикулярный поверхности ковша, должен быть быть рассчитаны для расчета точки.Он упакован в HT.ht.MathМатематическая функция , внутриht.Math.Vector2относится к двумерному вектору,ht.Math.Vector3Это трехмерный вектор, и для инициализации вектора можно передать три значения.Прототип вектора имеетcrossметод используется для вычисления нормального вектора двух векторов, например, следующий псевдокод:
1 var Vector3 = ht.Math.Vector3;
2 var a = new Vector3([10, 10, 0]);
3 var b = new Vector3([10, 0, 0]);
4 var ab = a.clone().cross(b);В приведенном выше коде ab — это рассчитанный вектор нормали. a.clone — это предотвращение перекрестной операции изменения исходного содержимого a, поэтому для перекрестного произведения клонируется новый вектор. Ниже приведена схематическая диаграмма:
Анализ механического движения ковша
При выполнении механического кода ковшовой части положение ковша и оборудования всех точек соединения ковша преобразуется в относительные положения относительно определенного узла, например, координаты узла А в мире равны [100, 100, 100] , в мире также есть узел B, и координаты узла B равны [10, 10, 10], тогда относительное положение узла A относительно узла B равно [90, 90, 90], так как при расчете положения ковша экскаватор мог в это время переместиться в определенную точку или повернуться к определенной оси, поэтому координаты относительно мира в это время использовать нельзя, а относительные координаты относительно корпуса экскаватора необходимо использовать для расчета.toLocalPostion(node, worldPosition)Он используется для преобразования мировых координат worldPosition в относительные координаты относительно узла Ниже приведена реализация кода:
1 var Matrix4 = ht.Math.Matrix4,
2 Vector3 = ht.Math.Vector3;
3 var mat = new Matrix4().fromArray(this.getNodeMat(g3d, node)),
4 matInverse = new Matrix4().getInverse(mat),
5 position = new Vector3(worldPosition).applyMatrix4(matInverse);
6 return position.toArray();Возвращаемое значение этой функции - относительные координаты. Координаты, которые необходимо преобразовать в экскаваторе, - это две части, соединяющие ковш и цевье. Система используетarmHingeтак же какbucketHingeЧтобы представить две части шарнира цевья и шарнира ковша соответственно, действие ковша можно рассмотреть сбоку.Как видно из рисунка ниже, ключевым моментом является вычисление координат точки пересечения P, а координаты точки пересечения P основаны на armHinge Положение ведраHinge — это центр окружности, а длина armHinge и BucketHinge — это пересечение двух окружностей, радиус которых равен радиусу, а центры этих двух окружностей равны постоянно меняется при вращении ковша, поэтому необходимо непрерывно вычислять положение пересечения путем математического расчета.Следующее представляет собой принципиальную схему:
Из приведенного выше рисунка мы можем знать, что есть две точки пересечения p1 и p2.В программе вычисляется вектор c2ToC1, образованный центром окружности 1 и центром окружности 2. Ниже приведен псевдокод:
1 var Vector2 = ht.Math.Vector2;
2 var c2ToC1 = new Vector2({ x: c1.x, y: c1.y }).sub(new Vector2({ x: c2.x, y: c2.y }));c1 и c2 - координаты центра armHinge и BucketHinge. Далее нужно вычислить векторы c2ToP1 и c2ToP2, состоящие из центра 2 и точек p1 и p2. Ниже приведен псевдокод:
1 var Vector2 = ht.Math.Vector2;
2 var c2ToP1 = new Vector2({ x: p1.x, y: p1.y }).sub(new Vector2({ x: c2.x, y: c2.y }));
3 var c2ToP2 = new Vector2({ x: p2.x, y: p2.y }).sub(new Vector2({ x: c2.x, y: c2.y }));С помощью вышеуказанных операций мы можем получить три вектораc2ToC1,c2ToP1,c2ToP2Следовательно, мы можем использовать концепцию векторного перекрестного произведения, о которой я упоминал выше, для выбора точек p1 и p2.Результаты, полученные перекрестным произведением векторов c2ToC1 и c2ToP1, и векторов c2ToC1 и c2ToP2 должны быть больше 0 и меньше 0. Перекрестное произведение многомерных векторов может непосредственно рассматривать их как трехмерные векторы, а ось z является трехмерным вектором с 0, но результат двумерного векторного произведенияresultЭто не вектор, а значение.Если результат > 0, то a поворачивается к b под углом 180°, если k = 0, то a, вектор b параллелен, поэтому с помощью приведенных выше теоретических знаний мы можем знать, что результат должен быть больше 0, а другой меньше 0. Мы можем измерить в программе, чтобы знать, что нам нужно получить точка P1, которая больше 0, поэтому каждый раз мы можем использовать описанный выше метод для выбора двух точек пересечения.
Ниже приведена блок-схема выполнения анимации части ведра:
После вышеуказанного операции мы можем получить координату координации окончательной необходимой точки. Координата точки P - важная точка соединения между ведром и предплечьем. После получения этой точки мы можем использовать информацию, предоставленную в HT.lookAtXФункция для достижения следующей операции, роль функции lookatx состоит в том, чтобы сделать объект смотреть на определенную точку, используемую следующим образом:
1 node.lookAtX(position, 'bottom');node — это узел, которому нужно смотреть в определенную точку, position — это координата точки, на которую нужно смотреть, а второй параметр имеет шесть значений перечисления на выбор, а именно «нижний», «обратный», «передний» , 'сверху'', 'справа', 'слева', роль второго параметра заключается в том, что когда нам нужно посмотреть на объект в определенную точку, мы также указываем, с какой стороны предмет смотрит на точку, поэтому нам нужно предоставить первые два параметра, чтобы было понятно.После получения этой функции мы можем держать два подключенных устройства всегда обращенными к этой точке, глядя на точку P с BucketHinge и точку P с armHinge.Ниже приведен некоторый псевдокод:
1 bucketHinge.lookAtX(P, 'front');
2 armHinge.lookAtX(P, 'bottom');Таким образом, после вышеперечисленных операций мы правильно разместили две ключевые части части ковша.Следующий шаг - правильно разместить положение гидравлической части на предплечье, соединенном с ковшом.Следующая часть - ввести узел Как положить.
Анализ гидравлической связи
В сцене мы видим, что гидравлическое давление в основном разделено на две части, одна часть представляет собой более тонкий белый гидравлический шток, а другая часть представляет собой более толстый черный гидравлический шток.Белый гидравлический шток вставляется в черный гидравлический шток, поэтому в малом Во время вращения руки или ковша нам нужно удерживать два узла в относительном положении.Из предыдущего шага мы можем знатьlookAtXФункция этой функции, поэтому в части гидравлического штока мы также используем эту функцию для ее достижения.
На предыдущем шаге мы получили ключевую точку P во время вращения ковша, поэтому гидравлический шток на нашем предплечье также должен быть соответствующим образом изменен во время вращения ковша.Конкретная операция заключается в изменении положения белого гидравлического штока. предплечья. Установите его в положение точки P, рассчитанной на предыдущем шаге. Конечно, вам нужно установить точку привязки белого гидравлического штока соответственно, а затем позволить белому гидравлическому штоку смотреть на черный гидравлический шток, и пусть черный гидравлический стержень смотрит на белый гидравлический стержень, так что два нижних гидравлических стержня все смотрят друг на друга, поэтому эффект, который они показывают, заключается в том, что белый гидравлический стержень расширяется и сжимается в черном гидравлическом стержне. псевдокод:
1 bucketWhite.p3(P);
2 bucketWhite.lookAtX(bucketBlack.p3(), 'top');
3 bucketBlack.lookAtX(P, 'bottom');в кодеbucketWhiteУзел представляет собой белый гидравлический шток на предплечье,bucketBlackУзел представляет собой черный гидравлический стержень на предплечье.С помощью вышеуказанных настроек можно реализовать телескопический анимационный эффект.Ниже приведена схема работы гидравлики:
Таким же образом реализуется гидравлическое воздействие стрелы на копающий орган и гидравлическое действие соединительной части между корпусом и стрелой вышеуказанным способом.Следующие коды этих двух частей:
1 rotateBoom: (rotateVal) = >{
2 excavatorBoomNode.setRotationX(dr * rotateVal);
3 let archorVector = [0.5 - 0.5, 0.56 - 0.5, 0.22 - 0.5];
4 let pos = projectUtil.toWorldPosition(g3d, excavatorBoomNode, archorVector);
5 boomWhite.lookAtX(boomBlack.p3(), 'bottom');
6 boomBlack.lookAtX(pos, 'top');
7 },
8 rotateArm: (rotateVal) = >{
9 projectUtil.applyRelativeRotation(excavatorArmNode, excavatorBoomNode, -rotateVal);
10 let archorVector = [0.585 - 0.5, 0.985 - 0.5, 0.17 - 0.5];
11 let pos = projectUtil.toWorldPosition(g3d, excavatorArmNode, archorVector);
12 armWhite.lookAtX(armBlack.p3(), 'bottom');
13 armBlack.lookAtX(pos, 'top');
14 }Я инкапсулирую движение двух частей в две функции rotateBoom и rotateArm, которые являются гидравлическим движением в соединении между стрелой и фюзеляжем и гидравлическим движением на стреле.В этой части, чтобы точно получить точку зрения , я передаю toWorldPosition Метод преобразует относительные координаты в мировые координаты, а относительные координаты являются координатами точки привязки черно-белой гидравлической штанги, и преобразует их в мировые координаты относительно стрелы или фюзеляжа.
Базовый анализ движения
Базовая машина, включающая копание движения вперед и назад, вращение тела, эта часть движения вышеупомянутых многих относительно простых, HT в трехмерной системе координат, продолжает модифицировать координатному корпусу ковыряющих машин X, Y, Z координат Может быть достигнут раскопки машины вперед и назад, модифицируя угол поворота организма вращающегося корпуса оси Y, может контролироваться, конечно, все остальные части тела требуют раскопки, адсорбированные в организме тело, тело Вращенные, когда другие компоненты будут соответствующие вращению, время протекает во время трекового нижнего копания, будет выполнять соответствующий курс прокатки, мы использовали здесь карту, прикрепленную к верхней части дорожки, когда экскаватор пересылается карту, чтобы изменить значение смещения Pseudo Код может добиться прокатки, изменяя значение смещения следующим образом:
1 node.s('shape3d.uv.offset', [x, y]);Вышеупомянутые x и y являются значениями смещения оси X и оси Y соответственно. Постоянное изменение значения y во время движения экскаватора вперед и назад может обеспечить эффект качения гусеницы.Специальная документация можно найти в 3D руководство
В процессе движения экскаватора вперед и назад мы можем одновременно нажимать четыре клавиши wasd, и мы всегда можем реагировать на клавиши.В js мы можем передать document.addEventListener('keydown', (e) => {}) и документируйте .addEventListener('keyup', (e) => {}) для мониторинга, но это может выполнять только действие, которое необходимо выполнять один раз за раз, поэтому мы можем настроить таймер извне. чтобы выполнить действие, которое должно выполняться непрерывно во время keydown , вы можете использовать keyMap для записи текущей нажатой кнопки, когда keydown записывается как true, когда keyup записывается как false, поэтому мы можем судить об этом логическом значении в таймер, и когда оно истинно, выполнить соответствующее действие, иначе оно не будет выполнено.Ниже приведена соответствующая часть кода клавиши:
1 let key_pressed = {
2 65 : {
3 status: false,
4 action: turnLeft
5 },
6 87 : {
7 status: false,
8 action: goAhead
9 },
10 68 : {
11 status: false,
12 action: turnRight
13 },
14 83 : {
15 status: false,
16 action: back
17 },
18 37 : {
19 status: false,
20 action: bodyTurnLeft
21 },
22 39 : {
23 status: false,
24 action: bodyTurnRight
25 }
26 };
27 setInterval(() = >{
28 for (let key in key_pressed) {
29 let {
30 status,
31 action
32 } = key_pressed[key];
33 if (status) {
34 action();
35 }
36 }
37 },
38 50);
39 document.addEventListener('keydown', (event) = >{
40 let keyCode = event.keyCode;
41 key_pressed[keyCode] && (key_pressed[keyCode].status = true);
42 event.stopPropagation();
43 },
44 true);
45 document.addEventListener('keyup', (event) = >{
46 let keyCode = event.keyCode;
47 key_pressed[keyCode] && (key_pressed[keyCode].status = false);
48 event.stopPropagation();
49 },
50 true);Из приведенного выше кода видно, что я записываю соответствующую клавишу и действие, соответствующее клавише, в переменной key_pressed и изменяю значение состояния текущей клавиши во время нажатия и нажатия клавиши, чтобы его можно было выполнить в интервале в соответствии с значение состояния переменной key_pressed Соответствующее действие действие, ниже приведена блок-схема выполнения:
Легкий вес и самоадаптация HT позволяют текущей системе бесперебойно работать на мобильном телефоне.Конечно, текущие 2D-чертежи на мобильном телефоне и компьютере загружаются с разными рисунками, а 2D-часть на мобильном телефоне оставляет рабочую часть только для эксплуатация экскаватора. Соответственно, другие части были отброшены, иначе на маленьком экране мобильного терминала невозможно отобразить столько данных. В части 3D-сцены одна и та же сцена используется совместно. Благодаря пакетной операции части построения сцены, 3D-операция на мобильном терминале также очень плавная. Ниже приведен скриншот работающего мобильного телефона:
Суммировать
Интернет вещей интегрирован в современную жизнь.Благодаря электронному оборудованию, встроенному в механическое оборудование, мы можем осуществлять мониторинг работы и производительности механического оборудования, а также своевременно предупреждать о проблемах механического оборудования. . Мониторинговая часть системы на 2D-панели представляет собой визуальное отображение собранных данных, и мы можем использовать большие данные и технологию Интернета вещей для соединения каждой машины с огромной машиной через бортовые контроллеры, датчики и модули беспроводной связи. соединения, каждый раз, когда лопата замахивается и делается шаг, формируется трассировка данных. Большие данные точно отражают такие условия, как скорость строительства инфраструктуры, и стали флюгером для наблюдения за экономическими изменениями, такими как инвестиции в основной капитал. Следовательно, после того, как описанное выше действие экскаватора реализовано, после подключения к датчику экскаватора, реальное действие экскаватора в это время может быть передано в систему через данные, и система выполнит соответствующую реальную операцию в соответствии с действием, которое действительно реализует взаимосвязь экскаватора и экскаватора.
Скрин запущенной программы: