基于WebGL架构的3D可视化平台—工业组态

最新推荐文章于 2024-06-25 14:43:00 发布

置顶

_Ginkgo

最新推荐文章于 2024-06-25 14:43:00 发布

阅读量8.4k

点赞数 1

本文链接：https://blog.csdn.net/nioooom/article/details/88019629

版权

本文介绍了基于WebGL架构的3D可视化平台在工业组态中的应用。通过加载场景、模块连线、交互事件处理，如鼠标监听事件、点击弹出面板，实现了复杂的工业自动化应用展示。此外，还探讨了事件暂停和恢复在消除干扰中的作用，以及使用拾取场景坐标进行元素连接的方法。

摘要由CSDN通过智能技术生成

前言
随着现代工业生产规模的日益扩大，工业自动化应用日益呈现规模化、复杂化和广域分布化特征，同时随着信息化时代的到来，使得用户对组态的功能和结构都提出了更高的要求。

Demo预览
在这里插入图片描述

实现
第一步，加载场景代码。

//加载场景代码
var app = new THING.App({
   
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/CB20190227155744",
});

第二步，完成各模块之间的连线。先创建一个createLine(points)方法，设置 scrollUV= true；可可开启line的UV动画会看到流动的效果。
在这里插入图片描述

function createLine(points) {
   
    var line = app.create({
   
        type: 'RouteLine',
        name: "panoLine",
        arrowFlag: false,
        points: points,
        image: 'http://thumb.static.3dmomoda.com/textures/18090613poqikheg.png' // 线路中的纹理资源

    });
    // 启用 UV 动画
    line.scrollUV = true;
    line.renderOrder = -10000;
    line.width = 8;
    return line;
}

第二步，当点击某一模块时弹出面板。

var panel;
app.on('SingleClick', function (ev) {
   
    var object = ev.object;
    if (object == null || object.name == "field")
        return;

    if (panel) {
   
        panel.destroy();
        panel = null;
    }

    panel = new THING.widget.Panel({
   
        width: '150px', 
        cornerType: 'polyline',
    })
    // 绑定物体身上相应的属性数据
    panel.addString(object, 'name').caption('name');
    panel.addString(object, 'id').caption('power');
    // 创建UIAnchor面板
    var uiAnchor = app.create({
   
        // 类型
        type: 'UIAnchor',
        // 父节点设置
        parent: object,
        // 要绑定的页面的 element 对象
        element: panel.domElement,
        // 设置 localPosition 为 [0, 0, 0]
        localPosition: [0, 0, 0],
        // 指定页面的哪个点放到localPosition位置上(百分比)
        pivot: [-0.2, 2.1]
    });

    // 将对应的 Panel 存下来 便于后续使用
    uiAnchor["panel"] = panel;

    return uiAnchor;
});