xhload3d

www.hightopo.com

Blog garden: :Home page: :Bo asked: :Flash memory: :New essays: :contact: :To subscribe to

: :management: :

177 Essay: 1 Article :: 356 Comment :: 0 citation

In May 2019

day

one

two

three

four

five

six

The announcement

xhload3d

Five years and four months

389

0
+ add attention

search

Commonly used links

My essay
My comments
I participate in
The latest comments
My label

My label

HTML5(152)
3D(74)
WebGL(69)
Industrial control (51)
Hightopo(49)
Telecommunication Network Management (31)
The topology (30)
Telecom (26)
Canvas(26)
Topology (25)
More and more

Archives of essays

May 2019 (1)
April 2019 (1)
February 2019 (2)
January 2019 (1)
September 2018 (2)
August 2018 (3)
July 2018 (5)
June 2018 (3)
May 2018 (4)
April 2018 (4)
March 2018 (6)
February 2018 (3)
January 2018 (6)
December 2017 (6)
November 2017 (10)
October 2017 (4)
June 2017 (2)
May 2017 (2)
February 2017 (1)
December 2016 (1)
October 2016 (4)
September 2016 (6)
August 2016 (4)
July 2016 (4)
June 2016 (3)
February 2016 (3)
December 2015 (4)
November 2015 (11)
October 2015 (10)
September 2015 (4)
August 2015 (2)
July 2015 (3)
June 2015 (1)
May 2015 (3)
April 2015 (2)
March 2015 (5)
February 2015 (1)
January 2015 (3)
December 2014 (9)
November 2014 (7)
October 2014 (1)
September 2014 (2)
August 2014 (3)
July 2014 (1)
June 2014 (3)
May 2014 (1)
April 2014 (1)
March 2014 (3)
February 2014 (3)
December 2013 (4)

The latest comments

1. Re: 3D visualization application of excavator based on HTML5 WebGL
What’s the use of this?
Happy valley –
2. Re: Rapid development of 3D bevel drag generation model for HTML5 WebGL
Are these 3d models referenced externally or drawn at the front?
– the legs
3. Re: 3D computer room data center visualization based on HTML5 WebGL and VR technology
Can you share a complete set of web3D source code?
– the legs
Re: 3D visualization system of subway station based on HTML5 WebGL
@Aslan can understand…
–xhload3d
5. Re: Extends Renderer and Editor for HTML5 table components in HT for Web
Hello, ITEye has stopped registering, so the above resources cannot be downloaded. Can you send them to my email? Thanks a million, [email protected]
— Big brother dong Dong dong

Reading leaderboards

1. Hundreds of HTML5 examples to learn HT graphics components – Topology (22486)
2. 3D Computer Room Monitoring Application of Telecom NETWORK Management based on HTML5 (18321)
3. Hundreds of HTML5 examples of learning HT graphics Components — WebGL 3D (6865)
4. Rapid development of HTML5 interactive subway line map (5503)
5. WebGL Building Automatic Control 3D Visual Monitoring Based on HTML5 (5325)

Review charts

1. 3D Computer room monitoring application of Telecom NETWORK Management based on HTML5 (31)
2. Rapid development of HTML5 interactive Subway Line map (18)
3. Hundreds of HTML5 examples to learn HT graphics components – Topology (14)
4. 3D Visualization system of Subway Station based on HTML5 WebGL (13)
5. HTML5 Archive Visual Management System Based on WebGL 3D (12)

Recommended leaderboard

1. Rapid development of HTML5 interactive subway Line map (37)
2. 3D Computer room Monitoring Application of Telecom NETWORK Management based on HTML5 (31)
3. Hundreds of HTML5 examples to learn HT graphics components — Topology (29)
4. 3D Visualization system of Subway Station based on HTML5 WebGL (23)
5. Hundreds of HTML5 examples of learning HT graphics components — WebGL 3D (16)

3D visualization application of excavator based on HTML5 WebGL

preface

Under the influence of the industrial Internet and the Internet of Things, people put forward higher requirements for the management, visualization and operation of machinery. How to display the operation of the machine completely in a system, the running track of the machine, or the mechanical action of the machine is particularly important, because it will help a little white who does not know the machine to intuitively understand the operation of the machine, as well as all the possible actions of the machine. For Sany or other domestic and foreign heavy machinery companies can have a better display or promotion. Excavators, also known as excavating machinery, from the development of engineering machinery in recent years, the development of excavator is relatively fast, excavator has become one of the most important engineering machinery in the construction. So this system has realized the 3 d visualization of excavator, in the traditional industry is usually the front end of the SCADA based on Web technology to realize 2 d visualization monitoring, and are part of the 2 d panel data monitoring, data was obtained from the background at the front desk display data, but for the excavator, excavator model, the action of excavator, The operation visualization of the excavator is more dazzling, so the system makes the visualization of the 3D model of the excavator, including the following aspects:

Forward and backward — users can realize forward and backward through keyboard WASD, or click 2D interface WASD to realize forward and backward of excavator.
Fuselage rotation — users can rotate the fuselage through the left and right keys of the keyboard, or click the 2D interface < > to rotate the fuselage of the excavator.
Arm Rotation – Users can click on the first part of the 2D interface slider to achieve arm rotation.
Forearm rotation – Users can click the second part of the 2D interface slider to achieve forearm rotation.
Scoop mining – users can click the third slider part of 2D interface to realize the rotation of scoop mining.
Excavation animation — Users can click the 2D interface spade icon, and after clicking, the system will make a series display of several animations of the excavation machine itself.

Through the construction of excavator visual scene and the realization of excavator mechanical action code, this article helps us understand how to use HT to realize the visualization of a excavator.

Preview address: Excavator 3D visualization application based on HTML5 WebGL www.hightopo.com/demo/ht-exc…

Interface preview

Mechanical movement effect of excavator

Several main actions of the excavator can be seen from the above GIF picture.

Excavator bucket movement effect

The third slide rod of the slide page controls the rotary digging of the bucket.

The body of the excavator moves

From the GIF picture above, we can see the forward and backward movement of the excavator as well as the rotation of the fuselage.

Scenario building

All shapes in the 3D scene are constructed with the wall tool inside HT. The display effect of similar buildings in the scene is constructed by setting the wall transparency property shape3d.transparent to true and mapping the constructed wall. For specific styles, please refer to the STYLE manual of HT. Scene effect:

Through the above we can see there are many wall construction in the scene, so they have many of the same place, such as the style and texture are the same, so in the HT can through batch operation to deal with these metope, batch refers to the meaning of the metope that under the condition of the current outstanding figure yuan is separate mapping model, Therefore, the performance will be poor, and when a batch of primitors are aggregated into a large model for one-time drawing, the WebGL refresh performance will be greatly improved. This is what you need to do in batch, please refer to the batch manual of HT for details.

The 2D panel part of the system is also drawn by HT vector. The panel part mainly includes the current excavator operation, working time, warranty information, fault information, etc. These data information is displayed in a TWO-DIMENSIONAL way. Panel screenshot:

Mechanical motion code analysis

Drivers in the system of action is very important and key, how do big forearm movement hydraulic rod movement, digging bucket hydraulic pole when motion, rotating parts, and how the parts of connected to scoop linkage is the key point, machinery animation used in most of the mathematics knowledge point face position calculation, here are a few key mathematical knowledge as a basis:

In mathematics, a vector (also known as a geometric vector, vector) is a quantity that has magnitude and direction. It can be visually represented as a line segment with an arrow. In the system, the vector perpendicular to a certain surface is calculated by the cross product of the vector, namely the normal vector. In the calculation of the bucket rotation, the normal vector perpendicular to the bucket surface is needed to calculate the point. HT contains the mathematical function of HT. Ht.math.vector3 is a three-dimensional vector, which can be initialized by passing in three values. The vector prototype has the cross method used to calculate the normal vectors of two vectors, such as the following pseudocode:

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);Copy the code

In the above code, AB is the normal vector for calculation. In order to avoid the modification of the original CONTENT of A by cross operation, A new vector is cloned for cross product. The following is the schematic diagram:

Bucket mechanical motion analysis

In the mechanical code of the bucket part, the position of the bucket and the equipment at all the connection points of the bucket will be converted into the relative position of A node. For example, the coordinate of node A in the world is [100, 100, 100], and there is also A node B in the world. And the coordinate of node B is [10, 10, 10], 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, so the coordinate relative to the world cannot be used at this time. Need to use the relative coordinates of the excavator body to calculate, the code provides toLocalPostion(node, worldPosition) to convert the coordinates of the world worldPosition into the relative coordinates of the relative Node, the code implementation is as follows:

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();Copy the code

The return value of this function is the relative coordinate, and the coordinate to be transformed in the excavator is the two parts connected with the bucket and the forearm. ArmHinge and bucketHinge are used in the system to represent the forearm hub and the bucket hub respectively. From the side view of the bucket action, it can be seen from the following figure. The key point is to calculate the coordinate of the intersection point P. The coordinate of the intersection point P is the intersection point of the two circles with armHinge and bucketHinge as the center of the circle, and the length of armHinge and bucketHinge as the radius. And the center of the two circles is constantly changing during the rotation of the bucket. Therefore, it is necessary to continuously calculate the position of the intersection point through mathematical calculation, as shown in the diagram below:

It can be seen from the figure above that there are two points of intersection p1 and P2. In the program, the vector c2ToC1 formed by center 1 and center 2 is calculated. The pseudocode is as follows:

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 }));Copy the code

C1 and C2 are center coordinates of armHinge and bucketHinge. Next, the vector c2ToP1 and c2ToP2 composed of center 2 and point P1 and p2 are calculated. The pseudo-code is as follows:

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 }));Copy the code

So by doing this we can get three vectors c2ToC1, c2ToP1, and c2ToP2 so we can use the idea of cross product that I talked about earlier to pick p1 and p2, and by c2ToC1 and c2ToP1, And the cross product of the vectors c2ToC1 and c2ToP2 will definitely result in one being greater than 0 and the other less than 0. The cross product of a two-dimensional vector can be directly regarded as a 3D vector, a 3D vector that complements 0 on the Z-axis. However, the result of the cross product of a two-dimensional vector is not a vector but a numerical value. If result > 0, then a is rotated to B at an Angle greater than 180 degrees, if k < 0, then a is rotated to B at an Angle greater than 180 degrees, if k = 0 then a and B are parallel, Therefore, according to the above theoretical knowledge, we can know that the result must be one greater than 0 and one less than 0. We can measure it in the program and know that what we need to obtain is the point P1 greater than 0. Therefore, two intersection points can be selected each time through the above method.

The following is the execution flow chart of the bucket animation:

Point P coordinate is an important point connecting bucket and forearm. After obtaining this point, we can realize the following operations through lookAtX function provided in HT. LookAtX function is used to make an object look at a certain point. The usage is as follows:

1 node.lookAtX(position, 'bottom');Copy the code

Position is the coordinate of the point to view. The second parameter has six enumerations to choose from: ‘bottom’, ‘back’, ‘front’, ‘top’, ‘right’, ‘left’. The second argument is that when we want something to look at a point we also need to specify which side of the object is looking at that point, so we need to provide a second argument to specify that. Once we get this function we can do this by pointing bucketHinge to point P, armHinge to point P, Can keep the two connected devices always facing the point, the following is part of the pseudocode:

1 bucketHinge.lookAtX(P, 'front');
2 armHinge.lookAtX(P, 'bottom');Copy the code

Therefore, after the above operation, we have put the two key parts of the bucket part in the correct position, and the next is to correctly place the hydraulic part of the forearm connected with the bucket. The next part is to introduce how to place the node.

Hydraulic linkage analysis

In the scene, we can see that the hydraulic pressure is mainly divided into two parts, one is a thin white hydraulic rod, and the other is a thick black hydraulic rod. The white hydraulic rod is inserted into the black hydraulic rod. Therefore, in the process of rotation of the forearm or bucket, we should always keep the two nodes in opposite positions. From the previous step we know the function lookAtX, so we also use this function for the hydraulic rod.

In the previous step we get to the key points in the process of digging bucket rotating P, so in the process of digging bucket rotating we forearm on the hydraulic rod should also corresponding change, the concrete operation is to lower the hydraulic pole position is set to white crust calculated in the location of the point P, of course, need to put the white hydraulic pole anchor point for the corresponding Settings, The white hydraulic rod lookAt the black hydraulic rod, and the black hydraulic rod lookAt the white hydraulic rod at the same time, so that the two hydraulic rods are looking at each other, so they give the effect of the white hydraulic rod stretching inside the black hydraulic rod, the pseudo-code below:

1 bucketWhite.p3(P);
2 bucketWhite.lookAtX(bucketBlack.p3(), 'top');
3 bucketBlack.lookAtX(P, 'bottom');Copy the code

The bucketWhite node in the code 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 operation diagram of the hydraulic pressure:

Similarly, the hydraulic action of the excavator’s big arm and the hydraulic action of the fuselage and the connecting part of the big arm are realized by using the above method. The codes of these two parts are as follows:

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}Copy the code

RotateBoom and rotateArm are the hydraulic movement at the connection between the big arm and the fuselage and the hydraulic movement on the big arm respectively. In this part, in order to accurately obtain the looking point, I converted the relative coordinates into world coordinates by toWorldPosition method. The relative coordinate is the anchor point coordinate of the black and white hydraulic rod, which is converted into the world coordinate of the relative big arm or fuselage.

Fundamental motion analysis

Drivers of basic movement includes forward backward, the fuselage spin, this part can move above the relatively simple many, in HT 3 d coordinate system, constantly change drivers fuselage of x, y, z coordinate values can be achieved drivers move back, by modifying the y axis rotation Angle of the fuselage can control the rotation of the body, Of course, all other parts on the body of the excavator need to be absorbed on the body. When the body rotates, other parts will rotate correspondingly. When moving forward, the track at the bottom of the excavator will roll correspondingly. When the excavator is moving forward, the track can be rolled by modifying the offset value of the map. The pseudocode for modifying the offset value is as follows:

1 node.s('shape3d.uv.offset', [x, y]);Copy the code

X and Y above are the offset values of X-axis and Y-axis respectively. In the process of moving forward and backward of the excavator, the rolling effect of the track can be realized by constantly modifying the value of Y. For specific documentation, please refer to the 3D manual

In the process of moving forward and backward of the excavator, we can press wasD four keys at the same time and respond to the keys all the time. In the js can through the document. The addEventListener (keydown, (e) = > {}) and the document. The addEventListener (‘ keyup ‘(e) = > {}) for listening, But this can only be done once at a time, so we can set up an external timer to execute the actions that need to be performed repeatedly during keyDown. We can use a keyMap to record the buttons that have been clicked. Bool (true on keyDown and false on keyUp); bool (true on keyUp); bool (false on keyUp);

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);Copy the code

As can be seen from the above code, I recorded the corresponding button and action action in the key_pressed variable, and changed the status value of the current key when keyDown and keyUp. Therefore, you can execute the corresponding action in Interval based on the status value of the key_pressed variable. The following is the flow diagram:

HT lightweight, adaptive to the current system in the mobile terminal can also smooth run, of course the current mobile terminal end part 2 d drawing with computer is to load a different drawings, 2 d on the mobile end part leaving only the drivers operation part, other parts of the corresponding abandoned, otherwise on the mobile end small screen can’t show so much data, All 3D scenes share the same scene. The batch operation of scene building makes 3D run smoothly on the mobile terminal. The following is a screenshot of the mobile terminal operation:

conclusion

The Internet of Things has been integrated into modern life, with electronic devices embedded in mechanical equipment, enabling us to monitor the operation and performance of mechanical equipment and provide timely warning of mechanical problems. In the monitoring system of 2 d panel part is the visual display of the collected data, and we can use big data and the Internet of things technology, will be running a desktop machine by airborne controller, sensors, and wireless communication module, and a vast network connection, every waving a shovel, action step, all form data. Big data accurately depicts the construction rate and other conditions, becoming a barometer to observe economic changes such as fixed asset investment. Therefore, after realizing the above excavator action and 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 carry out corresponding real operation according to the action, and truly realize the interconnection between the excavator and the network.

Program operation screenshot:

xhload3d
The editor
collection

comments

# 1 / f,

Happy valley

Support (0)
Against (0)

Refresh the comments
Refresh the page
Return to the top
The login
registered
access