Foreword
Under the influence of the Industrial Internet and the Internet of Things, people have put forward higher requirements for the management of machinery, the visualization of machinery, and the visualization of machinery operations. How to completely display the running status of the machine, the running track of the machine, or the mechanical movement of the machine in a system is particularly important, because it will help a white person who does not understand this machine to intuitively understand the operation of the machine, and All possible actions of machinery can have a better display or promotion for Sany or other domestic and foreign heavy industry machinery companies.
Excavator, also known as excavating machinery (excavating machinery) , from the development of construction machinery in recent years, the development of excavator is relatively fast, excavator has become one of the most important construction machinery in engineering construction. Therefore, the system realizes the 3D visualization of the excavator. In the traditional industry, it is generally based on the front-end technology of Web SCADA to achieve 2D visualization monitoring, and it is the monitoring of part of the data of the 2D panel. For the excavator itself, the model of the excavator, the movement of the excavator, and the visualization of the operation of the excavator are more eye-catching, so the system has visualized the movement of the 3D model of the excavator. several aspects:
- Forward and backward-users can use the keyboard wasd to achieve front, back, left, and right, or click the 2D interface WASD to achieve forward and backward excavator.
- Rotation of the fuselage-Users can rotate the fuselage through the left and right keys on the keyboard, or click the 2D interface <> to rotate the body of the excavator.
- Boom rotation-the user can click the first slider part of the 2D interface to rotate the boom.
- Arm rotation-The user can click the second slider part of the 2D interface to rotate the arm.
- Bucket digging-the user can click on the third slider part of the 2D interface to realize the rotary digging of the bucket part.
- Excavator animation-Users can click the shovel icon in the 2D interface. After clicking, the system will display several animations of the excavator itself in series.
This article explains the construction of the excavator visualization scene and the realization of the excavator mechanical action code to help us understand how to use HT to realize the visualization of an excavator.
Preview address: 3D visualization application of excavator based on HTML5 WebGL www.hightopo.com/demo/ht-exc…
Interface effect preview
Excavator mechanical movement effect
From the gif picture above, we can see several main actions of the excavator.
Excavator bucket movement effect
The third slider on the sliding page controls the rotating excavation of the bucket.
Excavator body movement
From the gif picture above, we can see the forward and backward movements of the excavator and several movements of the fuselage rotation.
Scene construction
All the shapes in this 3D scene are constructed using the wall tool inside HT . By setting the shape property of the wall transparent shape3d.transparent to true and mapping the constructed wall to construct the display effect of similar buildings in the scene, The specific style can refer to HT's style manual , scene effect:
Through the above picture, we can see that there are many wall buildings in the scene, so they have many common places, such as the style and texture are the same, so in HT , these walls can be processed through batch operations , Batch means that the wall primitives are currently independently drawn models under the current unprocessed situation, so the performance will be poor, and when a batch of primitives are aggregated into a large model for one-time drawing , WebGL will greatly enhance refresh performance, so this is the bulk of things to do, specifically refer to HT the batch manual .
The system is also through the panel portion 2d HT is a vector drawn, the panel portion including the current operation of the digging machine, working time, warranty information, fault information, the data show, a two-dimensional panel theme by:
Mechanical movement code analysis
The action of the excavator in this system is very important and critical. How to move the hydraulic bar during the movement of the big and small arms, the hydraulic rod, the rotation point parts when the bucket moves, and how the components connected to the bucket are linked Point, most of the mathematical knowledge is used in the mechanical animation to calculate the position of the point surface. The following are several key mathematical knowledge points as the basis:
In mathematics, vectors (also called geometric vectors, vectors) refer to quantities that have size and direction. It can be visually represented as a line segment with arrows. The system will be calculated by multiplying the fork vector and the vector perpendicular to a plane that is normal vector, in the calculation required to rotate the bucket and the bucket is calculated normal vector perpendicular to the plane of the point to be calculated, the HT encapsulates ht.Math The mathematical function of ht.Math.Vector2 refers to a two-dimensional vector, ht.Math.Vector3 is a three-dimensional vector, you can pass three values to initialize the vector, the vector prototype has a cross method for calculation Normal vector of two vectors, for example the following pseudocode:
var Vector3 = ht.Math.Vector3;
var a = new Vector3([10, 10, 0]);
var b = new Vector3([10, 0, 0]);
var ab = a.clone().cross(b);In the above code, ab is the calculation normal vector. A.clone is to avoid the cross operation will modify the original content of a, so a new vector is cloned for cross multiplication. The following is a schematic diagram:
Bucket machine motion analysis
The mechanical code of the bucket part will convert the position of the bucket and all the connection points of the bucket into a relative position relative to a node, for example, the coordinates of node A in the world are [100, 100, 100] , There is also a node B in the world, and the coordinate of node B is [10, 10, 10], then the relative position of node A relative to node B is [90, 90, 90], because when calculating the position of the bucket , The excavator may have moved to a certain point or rotated to a certain axis at this time, so the relative world coordinates cannot be used at this time, you need to use the relative coordinates of the relative excavator body to calculate, the code provides toLocalPostion (node, worldPosition) is used to convert the world coordinate worldPosition into relative node relative coordinates. The following is the code implementation:
var Matrix4 = ht.Math.Matrix4,
Vector3 = ht.Math.Vector3;
var mat = new Matrix4().fromArray(this.getNodeMat(g3d, node)),
matInverse = new Matrix4().getInverse(mat),
position = new Vector3(worldPosition).applyMatrix4(matInverse);
return position.toArray();The return value of this function is relative coordinates. The coordinates that need to be converted in the excavator are the two parts connected to the bucket and the arm. The armHinge and bucketHinge are used in the system to denote the arm pivot and the bucket pivot respectively. For the parts, you can see the action of the bucket from the side. As you can see from the figure below, the key point is to calculate the coordinates of the intersection point P. The coordinates of the intersection point P are the center of the armHinge and bucketHinge positions, and the length of the armHinge and bucketHinge is the radius. The intersection point of the two circles and the center of the two circles are constantly changing during the rotation of the bucket, so the position of the intersection point needs to be continuously calculated through mathematical calculations. The following is a schematic diagram:
From the above figure, we can know that there are two p1 and p2 at the intersection point. In the program, by calculating the vector c2ToC1 formed by the center of the circle 1 and the center of the circle 2, the following is the pseudo code:
var Vector2 = ht.Math.Vector2;
var c2ToC1 = new Vector2({ x: c1.x, y: c1.y }).sub(new Vector2({ x: c2.x, y: c2.y }));c1 and c2 are the center coordinates of armHinge and bucketHinge. The next step is to calculate the vectors c2ToP1 and c2ToP2 formed by center 2 and points p1 and p2. The following is the pseudo code:
var Vector2 = ht.Math.Vector2;
var c2ToP1 = new Vector2({ x: p1.x, y: p1.y }).sub(new Vector2({ x: c2.x, y: c2.y }));
var c2ToP2 = new Vector2({ x: p2.x, y: p2.y }).sub(new Vector2({ x: c2.x, y: c2.y }));Through the above operations, we can obtain three vectors c2ToC1 , c2ToP1 , c2ToP2. So we can use the concept of vector cross multiplication I mentioned above to select points p1 and p2, through vectors c2ToC1 and c2ToP1, and vectors c2ToC1 and c2ToP2 respectively. the results obtained by a definitely smaller than 0 is greater than 0, the two-dimensional vector cross product directly to them as 3d vector, z-axis three-dimensional vector complement of 0, but the result of two-dimensional vector cross product result is not a vector values but , If result> 0, then the angle from a to b is <180 °, if k <0, then the angle from a to b is> 180 °, if k = 0 then the a and b vectors are parallel, so Through the above theoretical knowledge, we can know that the result must be one greater than 0 and one less than 0. We can test in the program to know that we need to obtain the point P1 greater than 0, so each time we can perform two The choice of intersection.
The following is the execution flowchart of part of the animation of the bucket:
After the above calculations, we can obtain the final required point P coordinate. The point P coordinate is an important point of the connection between the bucket and the arm. After obtaining this point, we can use the lookAtX function provided in HT to achieve the next Operation, the function of the lookAtX function is to make an object look at a certain point, and it is used as follows:
node.lookAtX(position, 'bottom');node is the node that needs to look at a certain point, position is the coordinate of the point to look at, the second parameter has six enumeration values to choose from, namely 'bottom', 'back', 'front', 'top ',' Right ',' left ', the role of the second parameter is that when we need to look at an object to a certain point, we also need to specify which face of the object to look at that point, so we need to provide the first The two parameters are clear. After obtaining this function, we can look at the bucketHinge to point P, and armHinge to point P, so that the two connected devices can always keep facing this point. The following is part of the pseudo code:
bucketHinge.lookAtX(P, 'front');
armHinge.lookAtX(P, 'bottom');Therefore, after the above operations, we have placed the two key parts of the bucket part correctly. The next step is to correctly position the hydraulic part on the arm connected to the bucket. The next part is to introduce the node How to place it.
Hydraulic linkage analysis
In the scene, we can see that the hydraulic pressure is mainly divided into two parts, one part is white thin hydraulic rod, the other part is black thick hydraulic rod, the white hydraulic rod is inserted in the black hydraulic rod, so it is small During the rotation of the arm or bucket, we must maintain the relative position of the two nodes. Through the previous step, we can know the function of the lookAtX function, so we also use this function in the hydraulic rod part.
In the previous step, we obtained the key point P in the bucket rotation process, so the hydraulic lever on our arm must also be changed accordingly during the bucket rotation. The specific operation is to position the white hydraulic lever of the arm Set to the position of the point P calculated in the previous step, of course, you need to set the anchor point of the white hydraulic rod accordingly, and then let the white hydraulic rod lookAt the black hydraulic rod, and at the same time let the black hydraulic rod lookAt the white hydraulic rod. The hydraulic rods are looking at each other, so the effect they show is that the white hydraulic rod expands and contracts in the black hydraulic rod. The following is the pseudo code:
bucketWhite.p3(P);
bucketWhite.lookAtX(bucketBlack.p3(), 'top');
bucketBlack.lookAtX(P, 'bottom');In the code, the bucketWhite node is the white hydraulic rod on the forearm, and the bucketBlack node is the black hydraulic rod on the forearm. Through the above settings, the telescopic animation effect can be achieved. The following is the hydraulic operation diagram:
Similarly, the hydraulic action of digging the boom on the fuselage and the hydraulic action of the connection between the fuselage and the boom are all achieved using the above method. The following is the code of these two parts:
rotateBoom: (rotateVal) = >{
excavatorBoomNode.setRotationX(dr * rotateVal);
let archorVector = [0.5 - 0.5, 0.56 - 0.5, 0.22 - 0.5];
let pos = projectUtil.toWorldPosition(g3d, excavatorBoomNode, archorVector);
boomWhite.lookAtX(boomBlack.p3(), 'bottom');
boomBlack.lookAtX(pos, 'top');
},
rotateArm: (rotateVal) = >{
projectUtil.applyRelativeRotation(excavatorArmNode, excavatorBoomNode, -rotateVal);
let archorVector = [0.585 - 0.5, 0.985 - 0.5, 0.17 - 0.5];
let pos = projectUtil.toWorldPosition(g3d, excavatorArmNode, archorVector);
armWhite.lookAtX(armBlack.p3(), 'bottom');
armBlack.lookAtX(pos, 'top');I encapsulated the two parts of the motion into two functions, rotateBoom and rotateArm, which are the hydraulic motion at the connection between the boom and the fuselage and the hydraulic motion on the boom. In this part, in order to accurately obtain the point of view, I use toWorldPosition The method converts the relative coordinates into world coordinates, and the relative coordinates are the anchor coordinates of the black and white hydraulic rod, and the world coordinates of the relative arm or the fuselage.
Basic motion analysis
The basic movement of the excavator includes forward and backward, and the rotation of the fuselage. This part will be much simpler than the above movement. In the HT three-dimensional coordinate system, continuous modification of the x, y, and z coordinate values of the excavator body can achieve excavation. The forward and backward of the machine can be controlled by modifying the y-axis rotation angle of the fuselage. Of course, all other components on the body of the excavator need to be adsorbed on the fuselage. When the fuselage rotates, other components will be Perform the corresponding rotation, the crawler at the bottom of the excavator will roll correspondingly when advancing, of course, we use a crawler map on the crawler, and modify the offset value of the map when the excavator moves forward. The track can be scrolled, and the pseudo code to modify the offset value is as follows:
node.s('shape3d.uv.offset', [x, y]);The above x and y are the offset values of the x-axis and the y-axis direction, and the value of y can be continuously modified during the forward and backward movements of the excavator to achieve the rolling effect of the crawler. For specific documentation, please refer to the 3D manual
In the process of digging machine forward and backward, we can wasd pressing four keys at the same time, and can respond to the keys all the time. In js, you can use document.addEventListener ('keydown', (e) => {}) and document .addEventListener ('keyup', (e) => {}) to monitor, but this can only perform the action that needs to be performed once each time, so we can start a timer externally to perform the actions that need to be continuously executed when keydown , You can use a keyMap to record the key that has been clicked, record as true in keydown and record as false in keyup, so we can judge the bool value in the timer, and when it is true, execute the corresponding action , Otherwise it will not be executed, the following is the corresponding part of the key code:
let key_pressed = {
65 : {
status: false,
action: turnLeft
},
87 : {
status: false,
action: goAhead
},
68 : {
status: false,
action: turnRight
},
83 : {
status: false,
action: back
},
37 : {
status: false,
action: bodyTurnLeft
},
39 : {
status: false,
action: bodyTurnRight
}
};
setInterval(() = >{
for (let key in key_pressed) {
let {
status,
action
} = key_pressed[key];
if (status) {
action();
}
}
},
50);
document.addEventListener('keydown', (event) = >{
let keyCode = event.keyCode;
key_pressed[keyCode] && (key_pressed[keyCode].status = true);
event.stopPropagation();
},
true);
document.addEventListener('keyup', (event) = >{
let keyCode = event.keyCode;
key_pressed[keyCode] && (key_pressed[keyCode].status = false);
event.stopPropagation();
},
true);From the above code, it can be seen that I record the corresponding key and the action action corresponding to the key in the key_pressed variable, and modify the status status of the current key during keydown and keyup, so it can be executed in Interval according to the status value of the key_pressed variable Corresponding action, the following is the execution flowchart:
HT's light weight and self-adaptation allow the current system to run smoothly on the mobile phone. Of course, the 2D drawings of the mobile terminal and the computer are loaded with different drawings. The 2D part of the mobile terminal only leaves the operation part of the excavator. The other parts have been discarded accordingly, otherwise it is impossible to display so much data under the small screen of the mobile terminal. The 3D scene parts all share the same scene. The batch operation of the scene building part makes 3D run smoothly on the mobile phone side. , The following is a screenshot of the mobile terminal running:
to sum up
The Internet of Things has been integrated into modern life. Through the electronic equipment embedded in the mechanical equipment, we can complete the monitoring of the operation and performance of the mechanical equipment, as well as timely warning of mechanical equipment problems. In the 2D panel monitoring part of the system, it is a visual display of the collected data, and we can use big data and Internet of Things technology to pass a machine through an onboard controller, sensor, and wireless communication module, and a huge Network connection, every wave of a shovel, one step of action, all form data traces. Big data accurately depicts the infrastructure construction rate and other conditions, becoming a vane for observing economic changes such as fixed asset investment. Therefore, after implementing the above-mentioned excavator action, after connecting with the excavator sensor, the real action of the excavator at this time can be transmitted to the system through data, and the system will perform the corresponding real operation according to the action, and truly realize the excavator and Network interconnection.
Screenshot of the program running:
