Foreword
Industrial Internet, networking, visualization and other terms in our present background information is already familiar, everyday life transportation, travel, food and clothing and other possible can use the information way to express to us, visual monitoring in the traditional areas, are generally based front-end technology Web SCADA to implement 2D visual monitoring, the system uses Hightopo of HT for Web products to construct 3D visualization scene lightweight, the 3D scene from the front to show the reality of the scene a subway station, including real-time operation of the subway, the subway down the line, the video surveillance, smoke alarm, elevator operation and so on to help our intuitive understanding of the current subway station.
To help the system more intuitive and user-friendly view of the current subway station, offers three interactive mode:
- First-person mode - operation proceeds to pedestrians or vehicles traveling similar effect can be controlled by the forward-reverse keyboard.
- Automatic inspection mode - without any user operation, the automatic scene to inspect the scene forward-reverse current subway station in this mode.
- Mouse mode - Left rotation scene, right panning scenes.
This article subway station by building visual scene, animate code, the principle of interactive mode of resolution, as well as to achieve the main function points are set forth to help us learn how to use HT implement a simple subway station visualization.
Preview Address: subway station 3D visualization system is based HTML5 WebGL http://www.hightopo.com/demo/ht-subway/
Interface Introduction and preview effects
Subway effect
Effect metro station apart from the outer stop in the transparency is gradually increased, speed decreases.
Roaming effect
The above-described automatic inspection results of a roaming scene automatically forward rotation.
Monitoring device interaction effect
When we click on the monitoring equipment in the scene to view the current running status information, operational data and other equipment.
Scene set up
Most of the system models are generated by 3dMax modeling, the modeling tool can export obj and mtl files, HT can be generated in all complex models 3d scene by parsing obj and mtl files, of course, if it is some simple models can be used directly to HT draw, it will be more lightweight than obj model, so most simple models are based on HT for Web product lightweight HTML5 / WebGL modeling programs, specific parsing code is as follows:
@ 1 respectively obj file address, the file address MTL
2 ht.Default.loadObj ( 'obj / metro.obj', 'obj / metro.mtl', {
. 3 Center: to true,
. 4 // model is centered, default false, set to true position of the model will move its contents center
. 5 R3: [0, -Math.PI / 2, 0],
. 6 // rotational change parameters, the format [RX, Ry, Rz]
. 7 S3: [ 0.15, 0.15, 0.15],
8 // size change parameter, the format [SX, SY, SZ]
. 9 finishFunc: function (a ModelMap, Array, rawS3) {
10 IF (a ModelMap) {
. 11 ht.Default.setShape3dModel ( 'Metro ', array); // register a name for the model of the metro
12}
13}
14});
After loading the above obj model by registering a name for the metro model, then if you want to use this model can be achieved by the following code:
1 var node = new ht.Node();
2 node.s({
3 'shape3d': 'metro'
4 });
The code above created a new node object by setting the style object shape3d can model the name attribute metro use the node object is up, after a subway train model is the scene we see.
Animation code analysis
Achieve analysis subway animation code
Run scenarios Metro is achieved by scheduling plug-HT provides, scheduling specific usage can refer to the HT for Web scheduling manual , which is mainly used for the scheduling at specified time intervals callback processing, the first argument to the callback function for the data elements, which is the model node in a 3D scene, we can determine the current data whether the metro that node we just created to carry out subsequent operations, the scene simulates a left open the subway and a right to open the subway, two subway alternately appear. Certainly be in the 3D scene coordinates, the HT is used x, y, z respectively represent the three axes, the movement must be changed Metro Subway position in the coordinate system to implement the operation of the subway, subway coordinates as FIG. below:
Metro coordinate system can know in the 3D scene by the figure, if you want to achieve is only necessary to move the subway to subway shown in FIG moving direction of the red arrow, i.e., x direction of the shaft through setX continuous modification of this method location Metro subway achieve the purpose of travel, the code to continue to get the train speed and transparency of the train at this time by two methods getSpeedByX and getOpacityByX, the following as the key code to achieve:
= {The let metroTask. 1
2 interval The: 50,
. 3 // executed every fifty seconds
4 action: (data) => {// callback function that is mentioned above
5 // then determines whether a node is passed in subway train node
. 6 IF (=== Data currentMetro) {
. 7 // Get the X-axis position and the direction of travel in this case the metro
. 8 data.getX the let CurrentX = (),
. 9 data.a direction = ( 'direction');
10 / / Get the current X-axis position of the current train speed
. 11 speed = this.getSpeedByX the let (CurrentX);
12 is a train transparency // get the current based on the current position of the X-axis
13 is the let opacity = this.getOpacityByX (CurrentX);
14 / / X-axis position is determined at this time exceeds a certain value, that is moved in the underground within a certain range
15 iF (the Math.abs (CurrentX) <= 5000) {
16 // set the current transparency
. 17 Opacity!. 1 ==? currentMetro.s ({
18 is 'shape3d.transparent': to true,
. 19 'shape3d.opacity': Opacity
20 is}): currentMetro.s ({
21 is 'shape3d.transparent': to false
22 is});
23 is disposed // current X-axis position of
24 data. setX (CurrentX speed * + direction);
25 // subway speed determination at this time is 0, so the animation should be performed at this time to open the door
26 is IF (speed === 0) this.doorAnimation (currentMetro, direction);
27}
28 // open head rightward subway, reset
29 IF (CurrentX> 5000 && === direction. 1) {
30 = currentMetro leftMetro;
31 is currentMetro.setX (5000);
32}
33 is open // Metro head leftward, reset
34 if (currentX < -5000 && direction === -1) {
35 currentMetro = rightMetro;
36 currentMetro.setX( - 5000);
37 }
38 }
39 }
40 };
41 dm3d.addScheduleTask(metroTask);
Through the above code can know the subway in the process of running, mainly by modifying the subway x to create animation forward axis position, and the need to make the subway motion within a certain range, it is necessary to determine the border, and in order to simulate the real effect needs continue to get the current train speed and transparency based on the current position of the train subway, the following flow chart:
Shown above is a subway stop time process, when the finished subway stops required closing station, at this time we only need to look at the subway location is not reset to 0, the following is implemented as part of the code:
1 currentMetro.setX (direction * 10); // set the position of the Train
After executing the above sentence above code metroTask after the scheduled task execution to getSpeedByX this method to get to the speed rate is not zero, so at this time will continue animated subway travel, the speed at this time is from slow to fast, transparency of deep to shallow. The following is the open animation execution process:
Analysis realize automatic inspection code
Automatic inspection system implemented mainly by modifying the 3D scene eye and the center value, the HT provided Rotate , Walk traveling two methods to control the rotation angle of view and the angle of view, Rotate method of non-first-person mode, It is the rotation center for the center of rotation, i.e. the rotation about the central body, when rotated to a first-person eye rotation center, i.e., the rotational direction toward the eye. walk function while changing the eye and a center position, i.e. eye and the center movement while the same offset in the direction of the vector points established. I did not use this system rotate function but their perspectives to achieve the rotation, because the original function of rotate a certain angle of rotation will immediately rotate past without the rotation of a process, so I re-implemented method of rotation of the system viewing angle by continuously changing the rotation center to achieve values, specific implementation principle as shown below:
Part codes are as follows:
1 rotateStep() {
2 // 即上图辅助点 C
3 let fromCenter = this.fromCenter;
4 // 即上图 B 点
5 let toCenter = this.toCenter;
6 // 每帧转一度
7 let rotateValue = this.rotateFrame || Math.PI / 180;
8 // 辅助点 C 与 B 点之间建立一个方向向量
9 let centerVector = new ht.Math.Vector2(toCenter.x - fromCenter.x, toCenter.y - fromCenter.y);
10 let centerVectorLength = centerVector.length();
11 // 此时旋转百分比
12 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);
20 // 获取旋转过程中 center 的点信息
21 let newCenterPosition = [newCenterVector.x, this.personHeight, newCenterVector.y];
22 // 设置当前 center 的大小
23 this.g3d.setCenter(newCenterPosition);
24 }
通过上述代码就实现了场景中的视角旋转，并且可以通过修改 rotateValue 的值控制旋转的速度。
电梯动画代码的实现分析
场景中电梯是一个 obj 模型，3D 模型是由最基础的三角形面拼接合成，例如 1 个矩形可以由 2 个三角形构成，1 个立方体由 6 个面即 12 个三角形构成，以此类推更复杂的模型可以由许多的小三角形组合合成。因此 3D 模型定义即为对构造模型的所有三角形的描述，而每个三角形由三个顶点 vertex 构成，每个顶点 vertex 由 x, y, z 三维空间坐标决定，HT 中使用 vs 数组记录构成三角面的所有顶点坐标，所以如果想要让电梯运行起来，只需要把所有的顶点坐标往电梯运行的方向进行平移，以下为部分关键伪代码：
1 // vs 指的是构成电梯模型所有的三角面顶点坐标数组
2 // 由于场景中电梯的运行方向为往对角线右上方运动，所以只需要修改 x 轴以及 y 轴坐标值
3 // xStep yStep 为每次电梯运动的距离
4 setInterval(() = >{
5 // i+3 是因为 vs 数组的顺序为 x, y, z 轴 所以每次 i 偏移三个单位大小
6 for (let i = 0, l = vs.length; i < l; i = i + 3) {
7 // 该顶点坐标下一个 x 轴坐标的值
8 let nextX = vs[i] - xStep;
9 // 该顶点坐标下一个 y 轴坐标的值
10 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);
电梯运动动画如下图所示：
监控功能展示及介绍
视频监控
当点击场景中的摄像头之后右侧顶部会显示出当前摄像头的监控画面，以下为实现效果图:
烟雾报警监控
烟雾报警会根据后台实时传递过来的状态值来变换当前烟雾报警模型的颜色，红色为报警状态，以下为实现效果图:
电视列车到站时间监控
日常地铁站中会有专门的电视来展示下一班地铁到站的时间表，该系统中也模拟该效果，不过该系统暂时做了电视的模型，时间暂无对接，以下为效果图：
场景监控交互
3D 场景中交互是比较简单的，主要是点击摄像头展示 2D 监控面板，在 2D 界面中主要是切换三种交互模式，三种交互模式为互斥的关系，以下是 3D 交互注册事件代码:
1 g3d.mi((e) = >{
2 let {
3 g2d,
4 dm2d
5 } = this;
6 // 为点击类型
7 if (e.kind === 'clickData') {
8 // data 为当前点击的图元
9 let data = e.data;
10 // 当前图元的 shape3d 类型
11 let shape3d = data.s('shape3d');
12 // 判断当前 shape3d 类型是否为摄像头
13 if (shape3d && shape3d.indexOf('摄像头') > 0) {
14 let cameraPanel = dm2d.getDataByTag('cameraPanel');
15 // toggle 切换摄像头 2d 面板
16 g2d.isVisible(cameraPanel) ? cameraPanel.s('2d.visible', false) : cameraPanel.s('2d.visible', true);
17 }
18 }
19 @ a click 3d scene background type
20 is IF (e.kind === 'clickBackground') {
21 is the let cameraPanel = dm2d.getDataByTag ( 'cameraPanel');
22 is hidden camera // 2d panel
23 g2d.isVisible (cameraPanel) cameraPanel.s && ( '2d.visible', to false);
24}
25});
to sum up
The Internet industry people, data and machine connect, subway stations 3D visualization system is a good show, HT lightweight, data visualization, machine visualization, management of assets to help us better monitor. And by a variety of things the information sensing apparatus, real-time acquisition of various information and the like need to monitor any desired connection, interactive object or process by binding to HT better show the advantages of visualization, of course, also subway station and can VR be combined, in science and technology throughout the show, we can see a variety of VR scene operations, HT can also be combined with VR equipment to operate, you can wear the device to roam in the subway station, people have the feeling of being there , due to the lightweight scene itself, so the VR fluency in the scene is also very high, so users will not have the feeling of dizziness. Of course, the system itself can also be run in a mobile terminal, the mobile terminal is run shot:
Program run shot:
