基于 HTML5 WebGL 的楼宇智能化集成系统（三）

// 通过 moveCamera 改变 eye 和 center 来移动场景视角为大楼的正视面
moveCamera(g3d, [134, 399, 1617], [7, 40, 144], {
    duration: 2000,
    easing: t => t * t,
    finishFunc: () => {
        // 开启场景大楼模型的可透明为 true
        this.building.eachChild(c => {
            c.s({
                ‘shape3d.transparent‘: true,
            });
        });
        // 大楼模型线框的颜色变化
        tweenColor(this.building, ‘wf.color‘, ‘rgba(72,149,232,1)‘, ‘rgba(56,156,255,0.03)‘, {
            duration: 2000,
            easing: t => t
        });
        // 大楼模型整体染色的颜色变化
        tweenColor(this.building, ‘shape3d.blend‘, ‘rgba(120,180,255,1)‘, ‘rgba(120,180,255,0)‘, {
            duration: 2000,
            easing: t => t,
            finishFunc: () => {
                // 楼层设置为可见
                this.floor.eachChild(c => {
                    setNodeVisible(c, true);
                });
                this.floorLighting = 1;
                // 显示大楼建筑信息的动画
                this.showBuilding();
            }
        });
    }
});

// 面板显示
showPanel(data) {
    ht.Default.startAnim({
        duration: 1000,
        easing: t => t,
        action: (v,t) => {
            data.setScaleX(data.getScaleX() + (1 - data.getScaleX()) * v);
        }
    });
}

// 面板隐藏
hidePanel(data) {
    ht.Default.startAnim({
        duration: 1000,
        easing: t => t,
        action: (v,t) => {
            data.setScaleX(data.getScaleX() + (0 - data.getScaleX()) * v);
        }
    });
}

elevatorAnimation(data) {
    const g3d = this.g3d;
    const tag = data.getTag();
    const e = data.getElevation();
    const label = data.getChildAt(0);
    // 判断现在所处楼层
    let now = Math.ceil(e / 50);
    // 下一层楼层取1~7随机数
    let next = randomNumber(1, 7);
    // 根据现在的楼层和下一个楼层，判断电梯运行的范围
    let range = numBetween(now, next);
    this.animationElevatorMap[tag] = ht.Default.startAnim({
        duration: range * 800,
        easing: t => t,
        action: (v, t) => {
            // 电梯运行位置设定
            data.setElevation(now < next ? (e + (range * 50) * v) : (e - (range * 50) * v));
            // 设置电梯楼层面板显示并根据电梯位置设定
            if (!label) return;
            const floor = Math.ceil(data.getElevation() / 50);
            if (floor === label.a(‘text‘)) return;
            label.a(‘text‘, floor);
            // 手动刷新电梯面板信息
            g3d.invalidateShape3dCachedImage(label);
        },
        finishFunc: () => {
            // 销毁电梯间隔动画
            delete this.timeoutElevatorMap[tag];

            // 执行电梯间隔动画后回调电梯运行动画
            this.timeoutElevatorMap[tag] = setTimeout(() => {
                this.elevatorAnimation1(data);
            }, Math.floor(Math.random() * 5000) + 2000);
        }
    });
}

park(car, key = ‘Path‘, finishFunc) {
    const dm = car.dm();
    const tag = car.getTag();
    const forwardPath = dm.getDataByTag(tag + ‘_forward‘ + key);
    const backwardPath = dm.getDataByTag(tag + ‘_backward‘ + key);
    this.animationMap[tag] = move(car, forwardPath, ‘forward‘, undefined, 24, {
        pathEndFunc: () => {
            this.animationMap[tag].stop();

            this.animationMap[tag] = move(car, backwardPath, ‘backward‘, undefined, undefined, {
                pathEndFunc: () => {
                    this.animationMap[tag].stop();
                    delete this.animationMap[tag];

                    if (finishFunc) finishFunc();
                    return true;
                }
            });
            return true;
        }
    });
}

move(node, path, direction, step = 6, interval = 75, animParams) {
    let cache = path.__cache__;
    if (!cache)
        cache = path.__cache__ = ht.Default.getLineCacheInfo(path.getPoints(), path.getSegments());

    const len = ht.Default.getLineLength(cache);

    animParams = animParams || {};

    const face = direction === ‘forward‘ ? ‘front‘ : direction === ‘backward‘ ? ‘back‘ : direction;
    let currentLen = 0;
    const pathEndFunc = animParams.pathEndFunc;
    const action = animParams.action;
    animParams.action = (v, t) => {
        if (currentLen >= len) {
            // 档 pathEndFunc 返回 true 是，认为是要结束动画, 不执行后面档 action
            if (pathEndFunc && pathEndFunc())
                return;
        }
        currentLen = currentLen % len;

        const offset = ht.Default.getLineOffset(cache, currentLen);
        const point = offset.point;

        node.lookAtX([point.x, node.getElevation(), point.z], face);
        node.p3(point.x, node.getElevation(), point.z);

        currentLen = currentLen + step;

        if (action) action();
    };
    return loop(animParams.action, interval);
}

updateLight(view, light, color) {
    light.s(‘shape3d.image‘, ‘symbols/parking/‘ + color + ‘Light.json‘);
    view.invalidateShape3dCachedImage(light);
}