AI 助理
备案控制台
开发者社区 大数据 文章 正文

基于WebGL（ThingJS）的社区水电燃气管线3D可视化管理演示【三维管线,3D管线,水管可视化】

2018-12-22 1767
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 地下的管线错综复杂如何，图纸并不能完全满足实际需求，我们就用ThingJS平台来模拟一个小区水，电，天然气管线演示。 查看DEMO   第一步，利用CampusBuilder搭建模拟场景。
地下的管线错综复杂如何，图纸并不能完全满足实际需求，我们就用ThingJS平台来模拟一个小区水，电，天然气管线演示。
 
查看DEMO
 
 
 
第一步，利用CampusBuilder搭建模拟场景。CampusBuilder的模型库有各种各样的模型，使我们搭建出的场景更逼真。使用CampusBuilde创建层级，之后再给层级加外立面就出现了当前的效果。详情移步：CampusBuilder3D场景制作工具  
//加载场景代码
var app = new THING.App({
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/管线演示2",
    //背景设置
    "skyBox": "BlueSky"
});

　　

第二步， 初始化摄像机位置，添加四个按钮，并创建四个方法。 
app.on('load', function () {
    //摄像机位置初始化
    app.camera.position = [0.4374202706634094, 101.92917348318593, 97.06808820543526];
    app.camera.target = [52.75056074670042, -18.885239034825123, -20.619558480451797];
    new THING.widget.Button('水管演示', water);
    new THING.widget.Button('电线演示', electric);
    new THING.widget.Button('燃气演示', gas);
});

function water() {
}
function electric() {
}
function gas() {
}
 
第三步，创建管线，我们这里写水管线以后的电线，燃气管线同理。这里简单说一下PolygonLine，它继承THING.LineBase，同样有贴图属性，可以自己从本地上传图片至页面资源后使用。
  
var line = null;
function buildLine(points, color) {
    line = app.create({
        type: 'PolygonLine',
        points: points,
        style: {
            color: color,
        }
    });
    line.scrollUV = true;
}

function water() {
    var waterUnderPoints = []; 
    buildingOpacity(0.3);
    app.query(/building_0/).forEach(
        function (parentObj) {
            var points = [];
            points.push(parentObj.selfToWorld([5, -0.8, 0]));
            waterUnderPoints.push(points[0]);
            for (var i = 3; i <= 24; i += 3) {
                points.push(parentObj.selfToWorld([5, i, 0]));
                points.push(parentObj.selfToWorld([5, i, 3]));
                points.push(parentObj.selfToWorld([-5, i, 3]));
                points.push(parentObj.selfToWorld([-5, i, -3]));
                points.push(parentObj.selfToWorld([5, i, -3]));
                points.push(parentObj.selfToWorld([5, i, 0]));
            }
            points.push(parentObj.selfToWorld([5, 24, 0]));
            buildLine(points, '#0000FF');
        }
    );
    waterUnderPoints.push([15.32711, -0.79, -55.655339999999999]);
    buildLine(waterUnderPoints, '#0000FF');
    //renderOrder();
}

function buildingOpacity(num) {
    app.query("*").forEach(function (obj) {
        obj.style.opacity = num;
    });
}

function renderOrder(){
    app.query('.PolygonLine').forEach(
        function (obj) {
            obj.renderOrder = -10000;
        }
    );
}

　　

这里用到了两个方法：
1） buildingOpacity(num)；
这个方法的主要作用就是为了将场景虚化，更好的展示我们的管线。
2）renderOrder();
这个我在代码中先注释掉了我们先看一下现在的效果:
 
 
注意：如果没有设置renderOrder();属性的 ，管线的渲染层级没有building高 ，就会导致有被building遮盖的PolygonLine无法正常显示，设置renderOrder();属性后，渲染效果正常
 
 
最后一步，创建出电线以及燃气线 
function electric() {
    var electricUnderPoints = [];
    buildingOpacity(0.3);
    app.query(/building_0/).forEach(
        function (parentObj) {
            var points = [];
            points.push(parentObj.selfToWorld([3, -0.8, 0]));
            electricUnderPoints.push(points[0]);
            for (var i = 3; i <= 24; i += 2.5) {
                points.push(parentObj.selfToWorld([3, i, 0]));
                points.push(parentObj.selfToWorld([-3, i, 2]));
            }
            points.push(parentObj.selfToWorld([3, 24, 0]));
            buildLine(points, '#00FF00');
            console.log(points);
        }
    );
    electricUnderPoints.push([16.690666, -0.79, -55.115203999999999]);
    buildLine(electricUnderPoints, '#00FF00');
    renderOrder();
}

function gas() {
    var gasUnderPoints = [];
    buildingOpacity(0.3);
    app.query(/building_0/).forEach(
        function (parentObj) {
            var points = [];
            points.push(parentObj.selfToWorld([-6.2, -0.3, 0]));
            gasUnderPoints.unshift(points[0]);
            for (var i = 3; i <= 24; i += 3) {
                points.push(parentObj.selfToWorld([-6.2, i, 0]));
                points.push(parentObj.selfToWorld([-6.2, i, 2]));
                points.push(parentObj.selfToWorld([6.2, i, 2]));
                points.push(parentObj.selfToWorld([6.2, i, -2]));
                points.push(parentObj.selfToWorld([-6.2, i, -2]));
                points.push(parentObj.selfToWorld([-6.2, i, 0]));
            }
            points.push(parentObj.selfToWorld([-6.2, 24, 0]));
            buildLine(points, '#FF0000');
            console.log(points);
        }
    );
    gasUnderPoints.unshift([22.963023600000003, -0.3, 57.8305784]);
    buildLine(gasUnderPoints, '#FF0000');
    renderOrder();
}
 
 
 附上完整代码，可以直接在ThingJS平台调试
  
//加载场景代码
var app = new THING.App({
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/管线演示2",
    //背景设置
    "skyBox": "BlueSky"
});

app.on('load', function () {
    //摄像机位置初始化
    app.camera.position = [0.4374202706634094, 101.92917348318593, 97.06808820543526];
    app.camera.target = [52.75056074670042, -18.885239034825123, -20.619558480451797];

    new THING.widget.Button('水管演示', water);
    new THING.widget.Button('电线演示', electric);
    new THING.widget.Button('燃气演示', gas);

});

function water() {
    var waterUnderPoints = []; 
    buildingOpacity(0.3);
    app.query(/building_0/).forEach(
        function (parentObj) {
            var points = [];
            points.push(parentObj.selfToWorld([5, -0.8, 0]));
            waterUnderPoints.push(points[0]);
            for (var i = 3; i <= 24; i += 3) {
                points.push(parentObj.selfToWorld([5, i, 0]));
                points.push(parentObj.selfToWorld([5, i, 3]));
                points.push(parentObj.selfToWorld([-5, i, 3]));
                points.push(parentObj.selfToWorld([-5, i, -3]));
                points.push(parentObj.selfToWorld([5, i, -3]));
                points.push(parentObj.selfToWorld([5, i, 0]));
            }
            points.push(parentObj.selfToWorld([5, 24, 0]));
            buildLine(points, '#0000FF');
        }
    );
    waterUnderPoints.push([15.32711, -0.79, -55.655339999999999]);
    buildLine(waterUnderPoints, '#0000FF');
    renderOrder();
}

function electric() {
    var electricUnderPoints = [];
    buildingOpacity(0.3);
    app.query(/building_0/).forEach(
        function (parentObj) {
            var points = [];
            points.push(parentObj.selfToWorld([3, -0.8, 0]));
            electricUnderPoints.push(points[0]);
            for (var i = 3; i <= 24; i += 2.5) {
                points.push(parentObj.selfToWorld([3, i, 0]));
                points.push(parentObj.selfToWorld([-3, i, 2]));
            }
            points.push(parentObj.selfToWorld([3, 24, 0]));
            buildLine(points, '#00FF00');
            console.log(points);
        }
    );
    electricUnderPoints.push([16.690666, -0.79, -55.115203999999999]);
    buildLine(electricUnderPoints, '#00FF00');
    renderOrder();
}

function gas() {
    var gasUnderPoints = [];
    buildingOpacity(0.3);
    app.query(/building_0/).forEach(
        function (parentObj) {
            var points = [];
            points.push(parentObj.selfToWorld([-6.2, -0.3, 0]));
            gasUnderPoints.unshift(points[0]);
            for (var i = 3; i <= 24; i += 3) {
                points.push(parentObj.selfToWorld([-6.2, i, 0]));
                points.push(parentObj.selfToWorld([-6.2, i, 2]));
                points.push(parentObj.selfToWorld([6.2, i, 2]));
                points.push(parentObj.selfToWorld([6.2, i, -2]));
                points.push(parentObj.selfToWorld([-6.2, i, -2]));
                points.push(parentObj.selfToWorld([-6.2, i, 0]));
            }
            points.push(parentObj.selfToWorld([-6.2, 24, 0]));
            buildLine(points, '#FF0000');
            console.log(points);
        }
    );
    gasUnderPoints.unshift([22.963023600000003, -0.3, 57.8305784]);
    buildLine(gasUnderPoints, '#FF0000');
    renderOrder();
}

/************************************************************************
 * common
*/

function buildingOpacity(num) {
    app.query("*").forEach(function (obj) {
        obj.style.opacity = num;
    });
}

function renderOrder(){
    app.query('.PolygonLine').forEach(
        function (obj) {
            obj.renderOrder = -10000;
        }
    );
}

var line = null;
function buildLine(points, color) {
    line = app.create({
        type: 'PolygonLine',
        points: points,
        style: {
            color: color,
        }
    });
    line.scrollUV = true;
}

　　

 现实中社区管线远比DEMO中复杂，开发者可以根据自身业务实际，使用ThingJS开发出更多三维可视化应用。
 
文章标签：
数据可视化
thingjs
目录
相关文章
野云飞
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课（一）
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
野云飞
314 1
袁袁袁袁满
|
监控 数据可视化 算法
三维可视化神器带来无限可能，原来三维场景也可以如此轻松实现
三维可视化神器带来无限可能，原来三维场景也可以如此轻松实现
袁袁袁袁满
133 1
三维可视化神器带来无限可能，原来三维场景也可以如此轻松实现
LabVIEW开发
|
7月前
|
Windows
LabVIEW开发经济高效的多轴运动控制
LabVIEW开发经济高效的多轴运动控制
LabVIEW开发
36 0
MrRobot
|
7月前
|
存储 数据可视化 关系型数据库
管线GIS系统实战
管线GIS系统实战
MrRobot
102 5
GISer_Liu
|
定位技术 内存技术
GIS空间分析 三维分析4 制作飞行动画
本文中，我们利用ArcScene软件用3种方法制作了飞行动画
GISer_Liu
314 0
飘渺Jam
|
监控
构建三维一体立体化监控,看这一篇就够了！
如果你需要搭建一套能够立体化监控你的应用及业务，出现问题及时告警的监控体系，这篇文章应该是你所需要的！
飘渺Jam
570 0
构建三维一体立体化监控,看这一篇就够了！
zuoben
|
传感器 存储 JSON
智慧养殖，三维可视化解决方案
智慧养殖，三维可视化解决方案
zuoben
588 0
智慧养殖，三维可视化解决方案
游客g5eizyrh6cvnm
|
传感器 监控 数据可视化
基于WebGL的仓储粮食温度可视化 ThingJS
为了控制谷物储藏温度，需要创造一个不利于虫霉生长低温环境的储粮技术环境，然而出于成本考虑以及进出粮的需要，粮堆内的温度传感器设置数量有限，因此在储粮当中测得的温度值只是传感器附近的温度，其他部分则需要利用相应的方法进行数值模拟。
游客g5eizyrh6cvnm
408 0
基于WebGL的仓储粮食温度可视化 ThingJS
游客g5eizyrh6cvnm
|
编解码 监控 数据可视化
地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS
基于ThingJS的通用架构设计随着社会经济的不断发展，城市中的各类地下管线数量不断增加，逐渐构成了结构复杂的地下管网。
游客g5eizyrh6cvnm
611 0
地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS
游客g5eizyrh6cvnm
|
运维 监控 数据可视化
基于WebGL的三维交通监控可视化技术应用（实践版） ThingJS
互联网技术为交通行业的可视化带来了多样性的发展。从传统的二维平面变形图、二维SVG矢量图到如今的SVG三维矢量技术、BIM技术、GIS+BIM技术、 WebGL技术，甚至连AR、VR、MR等虚拟现实技术，也开始应用于交通领域的可视化发展方面。
游客g5eizyrh6cvnm
988 0
基于WebGL的三维交通监控可视化技术应用（实践版） ThingJS

热门文章

最新文章

  • 1
    天猫精灵开放平台-之小百科测评
  • 2
    语义检索系统：基于Milvus 搭建召回系统抽取向量进行检索，加速索引
  • 3
    Jetty使用总结
  • 4
    Exchange 2010迁移Exchange 2013(二)本地用户移动
  • 5
    Server 2008 R2 AD RMS完整部署
  • 6
    《并行计算的编程模型》一2.4.3　阻塞与非阻塞
  • 7
    数据中心在多云世界中还有未来吗？
  • 8
    [20170420]关于延迟块清除3.txt
  • 9
    求101-200以内的素数
  • 10
    拼接字符串常量
  • 1
    「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
    132
  • 2
    Python处理数据库：MySQL与SQLite详解 | python小知识
    40
  • 3
    Agent-Based概率模型让多无人机野外搜救更高效
    36
  • 4
    Python-打印99乘法表的两种方法
    29
  • 5
    Selenium：强大的 Web 自动化测试工具
    51
  • 6
    《docker高级篇（大厂进阶）：7.Docker容器监控之CAdvisor+InfluxDB+Granfana》包括：原生命令、是什么、compose容器编排，一套带走
    116
  • 7
    基于波特图的控制系统设计算法
    54
  • 8
    java实现从HDFS上下载文件及文件夹的功能，以流形式输出，便于用户自定义保存任何路径下
    54
  • 9
    【Azure Function App】Azure Function 从.Net6 升级到 .Net8 后 Function出现运行时版本错误
    58
  • 10
    Mock神器：Easy-Mock 私有化部署及使用介绍
    88

    • 相关课程

    更多
  • 场景实践-通过阿里云数据分析工具实现共享单车骑行分析
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 【数据可视化】基础数据画图
  • Hue大数据可视化终端课程
  • 智能运维赛（复赛）：利用数据和算法，快速定位系统异常并进行根因分析
  • 数据可视化理论与应用

    • 相关电子书

    更多
  • 如何高效的制作主机次时代游戏——高效游戏制作流程
  • FindPixel三维实景重建云上实践
  • 基于图的智能可观察性

    • 相关实验场景

    更多
  • 【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
  • 配置流程编排实现根据天气情况播放歌曲
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 【图生图】一键部署3D卡通风格模型
  • 基于函数计算一键部署掌上游戏机
  • DataV平面地图组件入门
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月