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

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

2018-12-22 1883
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 地下的管线错综复杂如何，图纸并不能完全满足实际需求，我们就用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
目录
相关文章
DevOps和k8s全栈技术
|
存储 Kubernetes 调度
了解pod和pod的生命周期-这一篇文章就够了
了解pod和pod的生命周期-这一篇文章就够了
DevOps和k8s全栈技术
375 0
了解pod和pod的生命周期-这一篇文章就够了
游客uqb2obj6pe7ry
|
JavaScript 前端开发 API
在线三维CAD中创建一个三维管道模型（网页浏览编辑三维CAD）
本文介绍了如何使用mxcad3d创建三维管道模型。mxcad3d提供了丰富的API，使复杂的管道结构设计变得直观简便。首先需安装mxcad包并初始化项目。接着，通过编写JavaScript函数实现圆角方管的绘制，并将其添加到web界面中。点击绘制按钮即可生成管道模型并实时展示。这为网页CAD中的三维建模任务提供了强大支持。相关代码与项目可在[mxcad3d官方仓库](https://gitee.com/mxcadadox/mxcad_docs/tree/master/examples3D/Test3dPipe.7z)获取。
游客uqb2obj6pe7ry
182 98
在线三维CAD中创建一个三维管道模型（网页浏览编辑三维CAD）
干饭小白
|
网络协议 IDE Linux
mongoose使用详细 -- 如何通过mongoose搭建服务器
mongoose使用详细 -- 如何通过mongoose搭建服务器
干饭小白
2040 0
弹性计算-百晓生
|
运维 JavaScript Java
快速部署阿里云WebIDE(DevStudio)并参与开源项目开发
3个步骤，在轻量应用服务器上完成部署DevStudio，帮你快速学习使用DevStudio进行代码的开发。
弹性计算-百晓生
1609 0
快速部署阿里云WebIDE(DevStudio)并参与开源项目开发
优惠码优惠
|
SQL 数据库
关于sql String类型的日期数据如何进行比较查询
优惠码优惠
4181 0
yuanzhengme
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象？
js如何格式化一个JSON对象？
yuanzhengme
392 3
baker_zhuang
|
12月前
|
图形学
ThreeJs创建管道效果
这篇文章介绍了在Three.js中创建管道（Tube）效果的方法和技术细节。
baker_zhuang
346 3
ThreeJs创建管道效果
bruce_xiaowei
|
12月前
|
网络安全 开发者 Python
VSCode远程切换Python虚拟环境
VSCode远程切换Python虚拟环境
bruce_xiaowei
635 1
sunrr
|
存储 DataWorks 关系型数据库
在DataWorks中，如果你想根据时间字段进行增量同步
在DataWorks中，如果你想根据时间字段进行增量同步
sunrr
272 2
Lion莱恩呀
|
Java 关系型数据库 MySQL
连接池技术：简单而强大的加速数据库访问方法
连接池技术是一种简单而强大的方法，可用于加速数据库访问。在传统的数据库访问过程中，每次与数据库建立连接和关闭连接都需要耗费大量的时间和资源。而连接池技术通过事先建立一组可重复使用的数据库连接，有效地减少了连接和关闭连接的开销。本文将深入探讨连接池技术的工作原理和优势，以及如何正确配置和使用连接池来提高应用程序的性能。无论你是开发人员还是系统管理员，通过了解连接池技术，你将能够更好地利用数据库资源，使系统更加稳定和高效。
Lion莱恩呀
947 0

热门文章

最新文章

  • 1
    如何配置 Java 环境变量：设置 JAVA_HOME 和 PATH
  • 2
    什么是Widevine？Widevine DRM详解
  • 3
    Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算
  • 4
    什么是tomcat？tomcat是干什么用的？
  • 5
    Webpack和Vite的区别
  • 6
    微信小程序：本地开发环境和线上环境配置
  • 7
    数据人必读！玩转数据可视化用这个就够了——高德LOCA API 2.0升级来袭！
  • 8
    Point Grey articles link
  • 9
    数据库负载急剧提高的应急处理(二)
  • 10
    软刀子割肉：智能电视的软陷阱
  • 1
    《政企API网关：安全与性能平衡的转型实践》
    37
  • 2
    《SaaS网关多租户治理：从串流到稳控的实践》
    30
  • 3
    从DQN到Double DQN：分离动作选择与价值评估，解决强化学习中的Q值过估计问题
    32
  • 4
    Aquarius 官方发布 3 级海面密度标准映射图像季节性数据 V5.0
    73
  • 5
    【Azure App Service】Root CA on App Service
    46
  • 6
    基于springboot的非遗传承宣传平台
    47
  • 7
    Proxmox Mail Gateway 9.0 正式版发布 - 全面的开源邮件安全平台
    36
  • 8
    VMware NSX 9.0.1.0 发布 - 下一代网络安全虚拟化平台
    64
  • 9
    爬坑 10 年！京东店铺全量商品接口实战开发：从分页优化、SKU 关联到数据完整性闭环
    40
  • 10
    VMware vSphere 9.0.1.0 发布 - 企业级工作负载平台
    35

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云免费云服务器:个人用户每月750小时免费