基于 HTML5 WebGL 的地铁站 3D 可视化系统

             1
            //
             分别为 obj 文件地址，mtl 文件地址
             2 ht.Default.loadObj(‘obj/metro.obj‘, ‘obj/metro.mtl‘, {
 3     center: true,
 4// 模型是否居中，默认为 false，设置为 true 则会移动模型位置使其内容居中 5     r3: [0, -Math.PI / 2, 0],
 6// 旋转变化参数，格式为 [rx, ry, rz] 7     s3: [0.15, 0.15, 0.15],
 8// 大小变化参数，格式为 [sx, sy, sz] 9     finishFunc: function(modelMap, array, rawS3) {
10if (modelMap) {
11             ht.Default.setShape3dModel(‘metro‘, array); // 注册一个名字为 metro 的模型12        }
13    }
14 });

            1
            var node = new ht.Node();
2node.s({
3     ‘shape3d‘: ‘metro‘
4 });

             1 let metroTask = {
 2     interval: 50,
 3// 每五十秒执行一次 4     action: (data) = >{ // 即上文所提回调函数 5// 判断当时传进来的节点是否为地铁列车节点 6if (data === currentMetro) {
 7// 获取地铁此时的 X 轴位置以及行进的方向 8             let currentX = data.getX(),
 9             direction = data.a(‘direction‘);
10// 根据当前的 X 轴位置获取当前的列车速度11             let speed = this.getSpeedByX(currentX);
12// 根据当前的 X 轴位置获取当前的列车透明度13             let opacity = this.getOpacityByX(currentX);
14// 判断此时 X 轴位置是否超过某个值 即地铁是在某个范围内移动15if (Math.abs(currentX) <= 5000) {
16// 设置当前的透明度17                 opacity !== 1 ? currentMetro.s({
18                     ‘shape3d.transparent‘: true,
19                     ‘shape3d.opacity‘: opacity
20                }) : currentMetro.s({
21                     ‘shape3d.transparent‘: false22                });
23// 设置当前的 X 轴位置24                 data.setX(currentX + direction * speed);
25// 判断此时地铁的速度为 0，所以此时应该执行开门的动画26if (speed === 0) this.doorAnimation(currentMetro, direction);
27            }
28// 右方向地铁开到头，进行复位29if (currentX > 5000 && direction === 1) {
30                 currentMetro = leftMetro;
31                 currentMetro.setX(5000);
32            }
33// 左方向地铁开到头，进行复位34if (currentX < -5000 && direction === -1) {
35                 currentMetro = rightMetro;
36                 currentMetro.setX( - 5000);
37            }
38        }
39    }
40};
41 dm3d.addScheduleTask(metroTask);

            1 currentMetro.setX(direction * 10); // 设置出站列车的位置

             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;
13if (rotatePercent >= 1) {
14         rotatePercent = 1;
15this.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 的大小23this.g3d.setCenter(newCenterPosition);
24 }

             1
            //
             vs 指的是构成电梯模型所有的三角面顶点坐标数组
             2
            //
             由于场景中电梯的运行方向为往对角线右上方运动，所以只需要修改 x 轴以及 y 轴坐标值
             3
            //
             xStep yStep 为每次电梯运动的距离
             4 setInterval(() = >{
 5// i+3 是因为 vs 数组的顺序为 x, y, z 轴 所以每次 i 偏移三个单位大小 6for (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);

             1 g3d.mi((e) = >{
 2    let {
 3        g2d,
 4        dm2d
 5     } = this;
 6// 为点击类型 7if (e.kind === ‘clickData‘) {
 8// data 为当前点击的图元 9         let data = e.data;
10// 当前图元的 shape3d 类型11         let shape3d = data.s(‘shape3d‘);
12// 判断当前 shape3d 类型是否为摄像头13if (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// 为点击 3d 场景背景类型20if (e.kind === ‘clickBackground‘) {
21         let cameraPanel = dm2d.getDataByTag(‘cameraPanel‘);
22// 隐藏摄像头 2d 面板23         g2d.isVisible(cameraPanel) && cameraPanel.s(‘2d.visible‘, false);
24    }
25 });