xhload3dwww.hightopo.com |
Blog garden: :Home page: :Bo asked: :Flash memory: :New essays: :contact: :To subscribe to  : :management: : |
 |
|
|
||||||
| day | one | two | three | four | five | six |
|---|---|---|---|---|---|---|
| 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 |
The announcement
xhload3d
Five years and two months
356
0
+ add attention
search
Commonly used links
- My essay
- My comments
- I participate in
- The latest comments
- My label
My label
- HTML5(150)
- 3D(74)
- WebGL(67)
- Industrial control (51)
- Hightopo(49)
- Telecommunication Network Management (31)
- The topology (30)
- Telecom (26)
- Canvas(26)
- Topology (25)
- More and more
Archives of essays
- 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: WebGL custom 3D camera monitoring model based on HTML5
- @ Hello 1234 can apply for trial…
- –xhload3d
- 2. Re: HTML5 Archive visual management system based on WebGL 3D
- @ Old boy look at business needs ah, to animation to this level is also ok, just trouble, can refer to…
- –xhload3d
- 3. Re: HTML5 Archive visual management system based on WebGL 3D
- @mpotato can experience, 2.3D fusion interactive components, very playable…
- –xhload3d
- Re: HTML5 Archive visual management system based on WebGL 3D
- @ that sword style open the link after opening the control panel Source inside take in everything in a glance to take out is a pile of position ah, and then removed from the scene or waiting for reuse, or can be linked to the database…
- –xhload3d
- 5. Re: 3D visual monitoring of HTML5 building automation based on WebGL
- @ Act 3: This building is highly abstract, implemented solely with HT…
- –xhload3d
Reading leaderboards
- 1. Hundreds of HTML5 examples to learn HT graphics components – Topology (20327)
- 2. 3D Computer room monitoring application of TELECOM NETWORK Management based on HTML5 (17972)
- 3. Hundreds of HTML5 examples of learning HT graphics components — WebGL 3D (6485)
- 4. Rapid development of HTML5 interactive subway line map (5115)
- 5. Baidu Map, ECharts Integration HT for Web Network Topology Application (4732)
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. HTML5 Archive Visual Management System based on WebGL 3D (12)
- 5. Power 3D Monitoring Application based on HTML5 Technology (IV) (11)
Recommended leaderboard
- 1. Rapid development of HTML5 interactive Subway Line map (36)
- 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 (28)
- 4. Hundreds of HTML5 examples of learning HT graphics components — WebGL 3D (16)
- 5. WebGL Building Automatic Control 3D Visual Monitoring Based on HTML5 (14)
3D visualization system of subway station based on HTML5 WebGL
preface
Industry to the Internet, the Internet of things, such as visual noun in the us under the background of informatization is now familiar, transportation of daily life, travel, food and so on May be can use information way to express for us, in the field of traditional visual monitoring, tend to be the front end of the SCADA based on Web technology to realize 2 d visualization monitoring, This system uses Hightopo’s HT for Web product to construct a lightweight 3D visual scene, which shows a realistic scene of a subway station from the front, including real-time operation of the subway, subway uplink and downlink, video monitoring, smoke alarm, elevator operation and so on. Help us intuitively understand the current subway station.
In order to help users browse the current subway station in a more intuitive and friendly way, the system provides three interactive modes:
- First person mode – The operation is similar to that of a pedestrian or car in motion, and can be controlled forward and backward using the keyboard and mouse.
- Automatic inspection mode – in this mode, users do not need to perform any operations, and the scene automatically moves forward and backward to inspect the scene of the current subway station.
- Mouse operation mode – left click to rotate the scene, right click to pan the scene.
This article explains how to use HT to realize a simple visualization of subway station by setting up the visual scene of subway station, realizing the animation code, analyzing the principle of interaction mode, and realizing the main function points.
Preview address: Subway station 3D visualization system based on HTML5 WebGL www.hightopo.com/demo/ht-sub…
Interface introduction and effect preview
Subway operation effect
The effect of the subway from outside the station to inside the station is gradually increased transparency, speed gradually decreased.
Effect of roaming
The above is the roaming effect of automatic inspection, and the scene is automatically rotated forward.
Monitor device interaction
When we click the monitoring device in the scene, we can view the running status and running data of the current device.
Scenario building
Most of the models in the system are generated by 3dMax modeling. The modeling tool can export OBJ and MTL files. In HT, all complex models in 3D scenes can be generated by parsing OBJ and MTL files, of course, some simple models can be drawn directly by HT. This will be lighter than OBJ model, so most simple models are based on HT for Web products lightweight HTML5/WebGL modeling scheme, the specific parsing code is as follows:
2 ht.default. loadObj('obj/metro.obj', 'obj/metro. MTL ', {3 center: 5 r3: [0, -math.pi / 2, 0], 6 // Rotate the change parameter in the format of [rx, ry, rz] 7 s3: [0.15, 0.15, 0.15], 8 // Size change parameter, format is [sx, SY, Sz] 9 finishFunc: function(modelMap, array, rawS3) { 10 if (modelMap) { 11 ht.Default.setShape3dModel('metro', array); // register a model named metro 12} 13} 14});Copy the codeAfter loading the obJ model, we registered a model named Metro. If we want to use this model, we can use the following code:
1 var node = new ht.Node();
2 node.s({
3 'shape3d': 'metro'
4 });Copy the codeThe above code creates a new Node object. By setting the shape3D property of the Style object, we can use the node object to name the model metro, and then we see the subway train model in our scene.
Animation code analysis
Metro animation code implementation analysis
The operation of subway in the scene is realized by the scheduling plug-in provided by HT. The specific usage of the scheduling can be referred to the scheduling manual of HT for Web. The scheduling is mainly used for function callback processing at the specified time interval. We can judge whether the current data is the node of metro that we created just now to carry out subsequent operations. The scene simulates a left subway and a right subway, and the two subways will appear alternately. In THE 3D scene, there will definitely be a coordinate system. In HT, x, Y and Z are used to represent the three axes respectively, so the movement of the subway must change the position of the subway in the coordinate system to realize the operation of the subway. The coordinates of the subway are as follows:
The coordinate system of the subway in the 3D scene can be known from the figure above. To realize the movement of the subway, it is only necessary to move the subway in the direction of the red arrow shown in the figure, namely the direction of the X axis. The setX method is used to continuously modify the position of the subway to achieve the purpose of subway moving. In the code, getSpeedByX and getOpacityByX are used to continuously obtain the train speed and train transparency at this time. The following is the key code implementation:
1 let metroTask = {2 interval: 50, 3 If (data === currentMetro) {7 currentX = data.getX(), 9 direction = data.a('direction'); Let speed = this.getspeedbyx (currentX); let speed = this.getspeedbyx (currentX); Let opacity = this.getopacityByx (currentX); 15 If (math. abs(currentX) <= 5000) {16 // Set the current opacity! = = 1? currentMetro.s({ 18 'shape3d.transparent': true, 19 'shape3d.opacity': opacity 20 }) : currentMetro.s({ 21 'shape3d.transparent': false 22 }); 24 data.setX(currentX + direction * speed); 26 If (speed === 0) this.doorAnimation(currentMetro, direction); If (currentX > 5000&& direction === 1) {30 currentMetro = leftMetro; 31 currentMetro.setX(5000); 34 if (currentX < -5000&& direction === -1) {35 currentMetro = rightMetro; 36 currentMetro.setX( - 5000); 37} 38} 39} 40}; 41 dm3d.addScheduleTask(metroTask);Copy the codeThrough the above code can know the subway in the running process, mainly by modifying the x position of the subway to produce forward animation, and need to let the subway in a certain range of motion, you need to determine boundaries, and in order to simulate the real effect according to the position of the current subway need to continue to get the current train speed and train the transparency, the following is a flow chart:
The figure above shows the process when the subway enters the station. When the subway stops and closes, it needs to exit the station. At this time, we only need to reset the position of the subway not to be 0.
1 currentMetro.setX(direction * 10); // Set the location of the outgoing trainCopy the codeWhen the above code is executed, the speed obtained by the metroTask is not 0 after the execution of getSpeedByX, so the animation of subway moving will continue to be executed. At this time, the speed is from slow to fast, and the transparency is from deep to shallow. The following is the execution process of the open door animation:
Automatic inspection code implementation analysis
The realization of automatic inspection in the system is mainly through modifying the value of eye and Center in 3D scenes. HT provides two methods of rotate and Walk to control the rotation and marching of the perspective. The rotate method in non-first-person mode, Rotation is centered around the center, that is, around the central object. In the first person, rotation is centered around the eye, that is, the direction of the eye. The walk function changes the position of eye and center at the same time, that is, eye and center move the same offset in the vector direction established at two points at the same time. In this system, I did not use the rotate function but realized the rotation of the Angle of view by myself, because the original rotate function would rotate a certain Angle without a rotation process, so I re-realized the rotation method. In this system, the rotation of the Angle of view was realized by constantly modifying the value of center. The specific implementation process principle is shown in the figure below:
Part of the implementation code is as follows:
1 rotateStep() {2 let fromCenter = this.fromcenter; ToCenter = this.tocenter; 6 / / per frame once 7 let rotateValue = this. RotateFrame | | math.h PI / 180; Vector2 = new ht.math.vector2 (tocenter.x-fromcenter.x, toCenter.y - fromCenter.y); 10 let centerVectorLength = centerVector.length(); 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); 21 let newCenterPosition = [newCenterVector.x, this.personHeight, newCenterVector.y]; 22 // Set the current center size. 23 this.g3d.setCenter(newCenterPosition); 24}Copy the codeThe above code allows you to rotate the perspective in the scene, and you can control the rotation speed by changing the value of rotateValue.
Elevator animation code implementation analysis
In the scene, the elevator is an OBJ model, and the 3D model is composed of the most basic triangular faces. For example, a rectangle can be composed of 2 triangles, and a cube can be composed of 6 faces, namely 12 triangles, and so on. A more complex model can be composed of many small triangles. Therefore, 3D model definition is the description of all triangles that construct the model, and each triangle is composed of three vertex vertex, and each vertex vertex is determined by x, Y and Z three-dimensional space coordinates. HT uses VS array to record all vertex coordinates of triangles. So if you want to make the elevator work, all you need to do is to shift all the vertex coordinates to the direction of the elevator. Here are some key pseudocodes:
1 // VS refers to the coordinate array of all triangular plane vertices that constitute the elevator model. 2 // Since the elevator moves to the upper right of the diagonal in the scene, SetInterval (() = >{5 // I +3 because the order of vs array is x, y, For (let I = 0, l = vs.length; i < l; Let nextX = vs[I] -xstep; let nextX = vs[I] -xstep; 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);Copy the codeThe elevator motion animation is shown below:
Display and introduction of monitoring functions
Video monitoring
After clicking the camera in the scene, the monitoring picture of the current camera will be displayed at the top of the right side. The following is the realization effect picture:
Smoke alarm monitoring
The smoke alarm will change the color of the current smoke alarm model according to the status value transmitted from the background in real time. Red is the alarm state. The following is the realization effect picture:
TV train arrival time monitoring
There will be a special TV in the subway station to show the arrival schedule of the next subway station, and this system also simulates this effect. However, the system has made a TV model temporarily, and the time has not been connected. The following is the effect picture:
Scenario Monitoring Interaction
Interaction in THE 3D scene is relatively simple, mainly by clicking the camera to display the 2D monitoring panel. In the 2D interface, three interaction modes are switched, and the three interaction modes are mutually exclusive. The event codes of 3D interaction registration are as follows:
1 g3d.mi((e) = >{ 2 let { 3 g2d, 4 dm2d 5 } = this; If (e.type === 'clickData') {8 let data = e.data; Let shape3d = data.s('shape3d'); 13 if (shape3D && shape3d.indexof (' Camera ') > 0) {14 let cameraPanel = dm2d.getDataByTag('cameraPanel'); 15 // Toggle to switch camera 2D panel 16 g2d.isVisible(cameraPanel)? cameraPanel.s('2d.visible', false) : cameraPanel.s('2d.visible', true); 20 if (e.type === 'clickBackground') {21 let cameraPanel = dm2d.getDataByTag('cameraPanel'); G2d. isVisible(cameraPanel) && Camerapanel. s('2d.visible', false); 24}});Copy the codeconclusion
The industrial Internet connects people, data and machines, and the 3D visualization system of subway station is a good demonstration. The lightweight of HT, the visualization of data, the visualization of machines and the management of assets help us to better monitor. And iot will through all kinds of information sensing device, no need to monitor real-time acquisition, connected, interactive information you need to wait for all sorts of objects or process, with the combination of the HT better show the advantage of visualization, subway station, of course, can also be combined with VR, everywhere in science and technology exhibition, we can see all kinds of VR scene operation, HT can also be combined with VR equipment for operation, so that people can wear the equipment to roam in the subway station, making people feel immersive. Due to the lightweight of the scene itself, the fluency in VR scene is also very high, so that users will not feel dizzy. Of course, the system itself can also run on the mobile terminal. The following is the screenshot of the mobile terminal operation:
Program operation screenshot:
