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

2021-03-20 16:24

阅读：564

move 是节点沿着路径平滑移动的封装函数，主要参数为：

node：动画节点；
path：运行路径；
direction：节点朝向 forward | backward;
animParams：动画参数；

通过绘制一条运行路线的管道，ht.Default.getLineCacheInfo() 得到这条管道的点位和分割信息 cache，然后管道信息通过 ht.Default.getLineLength() 得到管道的长度，并且通过 ht.Default.getLineOffset() 来获取连线或者管道指定比例的偏移信息，从而达到移动的效果，注意的是，这里还设定了 direction 来规定动画节点的朝向，主要是为了通过 node.lookAtX() 来获取节点下一个面对的朝向的位置信息，并设置节点此时的位置，从而达到节点沿着路径平滑移动的效果。

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);
}

与此同时，我们还可以看到车辆行驶到车位或者离开时，车位上方的红绿灯则表示着这个车位的停放信息，是根据车辆的情况实时设定车位的状况，通过改变其信号灯 image 的 json 图标并手动刷新缓存来实现的。而缓存机制对于整体场景的流畅度是至关重要的，对于一些不必要实时刷新的面板信息，我们可以采取缓存的方式，并且在下一次更新的时候调用 Graph3dView.invalidateShape3dCachedImage(node)来手动刷新这个节点，从而大大提高了场景的性能，有关 3D 面板的属性可以参考。

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

上一篇：CSS——选择器及三大特性

下一篇：.Net Core 开发学习 —— 4. 服务器部署

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：基于 HTML5 WebGL 的楼宇智能化集成系统（三）
文章链接：http://soscw.com/index.php/essay/66769.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章