基于 HTML5 WebGL 的高炉炼铁厂可视化系统

// 默认设置的眼睛视角数组
const ROAM_EYES = [
    [1683.6555274005063, 939.9999999999993, 742.6554147474625],
    [1717.1004359371925, 512.9256996098727, -1223.5575465999652],
    [-181.41773461002046, 245.58303266170844, -2043.6755074222654],
    [-1695.7113902533574, 790.0214102589537, -877.645744191523],
    [-1848.1700283399357, 1105.522705042774, 1054.1519814237804],
    [-108, 940, 1837]
];
// 开启相机移动漫游动画
playRoam() {
    // 设置场景眼睛视角
    let eye = ROAM_EYES[this.roamIndex];
    // 开启相机视角移动动画 moveCamera
    this._roamAnim = this.view.moveCamera(eye, [0, 0, 0], {
        duration: this.roamIndex ? 3000 : 4000,
        easing: Easing.easeOut,
        finishFunc: () => {
            this.roamIndex ++;
            let nextEye = ROAM_EYES[this.roamIndex];
            // 判断是否有下一组眼睛视角，有的话继续执行相机视角移动动画，反之则重置漫游动画
            if (nextEye) {
                this.playRoam();
            }
            else {
                // 事件派发执行显示面板动画
                event.fire(EVENT_SHOW_PANEL);
                this.resetRoam();
            }
        }
    });
}

// 设置初始偏移值
let offset1 = 0, trackOffset = 0;
// 一直调用设置偏移值
setInterval(() => {
    flows.each(node => {
        node.s({
            ‘top.uv.offset‘: [-offset1, 0],
            ‘front.uv.offset‘: [-offset1, 0],
        });
    });
    track.s(‘shape3d.uv.offset‘, [0, -trackOffset]);
    // 偏移值增加
    offset1 += 0.1;
    trackOffset += 0.03;
}, 100);