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

最新推荐文章于 2024-07-18 11:00:12 发布

置顶

_Ginkgo

最新推荐文章于 2024-07-18 11:00:12 发布

阅读量4.6k

点赞数 2

分类专栏： JavaScript

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

版权

本文介绍了如何使用WebGL架构构建3D可视化电力组态平台。通过加载场景、修改背景及建筑材质，实现了建筑的透明化，并利用RouteLine连接各个建筑物，展示了现代工业自动化和信息化时代对组态更高需求的满足。

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

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

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

在这里插入图片描述

实现
第一步，加载场景。当前场景中的建筑都是由Campus Builder中的万能物体组装起来的。

	// 创建App 
	var app = new THING.App({
   
    // 场景地址
    "url": "/uploads/wechat/S2Vyd2lu/scene/Demo_电路tjs"
});

在这里插入图片描述

第二步，修改场景背景，修改建筑的材质和不透明度。再用我们之前常用的RouteLine将这些建筑物连接在一起就成功了。这里先查出来所有的build，再遍历obj改变他们的贴纸以及不透明度，设置transparent为true将obj更改为透明材质。关于设置材质还有一些其他的参数见下图：
在这里插入图片描述

app.on('load', function () {
   
    app.background ="http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/bg3d.jpg";
    app.camera.position = [-32.37000213825802, 28.29026120065235, -60.979284414554186];
    app.camera.target = [-3.817, 0.01, -8.082];
    app.query('field').style.setMaterial(
        {
      
            image: "http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/field2.png",
            transparent: true,
            doubleSide: true,
            opacity: 1
        }
    );

    app.query(/build/).forEach