前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >管线可视化管理怎么实现呢?

管线可视化管理怎么实现呢?

原创
作者头像
要不要吃火锅
修改于 2019-12-30 03:07:31
修改于 2019-12-30 03:07:31
7870
举报
文章被收录于专栏:3D可视化3D可视化

无论是城市管线还是社区,商场,大厦里的管线,想要实时检测到管线的情况怕是有难度。如何通过物联网和互联网技术实现管线的可视化管理是解决问题的根本。

智慧电力可视化系统构建发电、输电、变电、配电、用电、调度、通信信息各个环节逐级可视。具备电站环境可视化、电力设备可视化、电力安防可视化标准功能,同时展示输电网、变电站及其内部的设备位置分布。

ThingJS-面向物联网的3D可视化开发平台
ThingJS-面向物联网的3D可视化开发平台

管线.js

/**

* 说明:管线应用

*/

var app = new THING.App({});

// 随机管线连接点

function randomPoints() {

    var points = [[0, 0, 0]];

    var oldType = 2;

    for (var i = 0; i < 50; i++) {

        var old = points[points.length - 1];

        var type = Math.floor(Math.random() * 100) % 3;

        while (oldType == type) {

            type = Math.floor(Math.random() * 100) % 3;

        }

        oldType = type;

        var offset = (Math.random() * 2 + 1) * (Math.random() > 0.5 ? 1 : -1);

        points.push([

            type === 0 ? (old[0] + offset) : old[0],

            type === 1 ? (old[1] + offset) : old[1],

            type === 2 ? (old[2] + offset) : old[2],

        ]);

    }

    return points;

}

// 布置管线

var line = null;

var lineIdx = 1;

function build() {

    // 删除原管线

    if (line) { line.destroy(); }

    // 创建管线

    line = app.create({

        type: 'PolygonLine',

        points: randomPoints(),

        width: 0.2,

        style: {

            image: 'https://thingjs.com/static/images/poly_line_0' + lineIdx + '.png', // 管线中的纹理资源

        }

    });

    // 切换线贴图

    if (lineIdx < 4) { lineIdx++; }

    else { lineIdx = 1; }

    // 开启 UV 动画

    line.scrollUV = true;

    // 设置最适合的摄像机观察位置

    app.camera.fit();

}

build();

new THING.widget.Button('重新布置', build);

ThingJS-面向物联网的3D可视化开发平台
ThingJS-面向物联网的3D可视化开发平台

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
融入ThingJS 3D可视化方案,让城市管线更加智能、高效
物联网数字化转型的目的之一就是为了积累数据,对设备进行智能化管理,管线深埋在地下,是非常难以管理的一种设备,引入3D可视化方案会有多大帮助呢?
森友鹿锘
2020/07/29
7250
融入ThingJS 3D可视化方案,让城市管线更加智能、高效
从零开始学习3D可视化之3D界面
生活中我们经常会说到3D,比如3D游戏、3D电影等等。3D指三维,三个维度、三个坐标,即长、宽、高。换句话说,就是立体的,3D的空间的概念是由X、Y、Z三个轴组成的空间,是相对于只有长和宽的平面(2D)而言。2D又叫平面图形,图形内容只有水平的X轴向与垂直的Y轴向。而一直以来在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的,3D“容器”提供了3D和2D的界面展示能力。
thingjs
2021/07/16
5710
三维可视化开发这事儿前端人员能搞定吗?
    url: 'https://www.thingjs.com/static/models/storehouse'    // 三维可视化场景地址
要不要吃火锅
2019/12/11
5720
三维可视化开发这事儿前端人员能搞定吗?
时间不再浪费评估上!ThingJS 3D可视化开发不用愁
想立即开始您的项目,而不是把时间浪费在评估各种开发工具,担忧实现效果不理想? ThingJS凭借各种内置的开发者工具以及对语言和框架开箱即用的支持,提供高效 JavaScript 开发3D可视化项目所需的一切!
森友鹿锘
2020/07/17
6660
时间不再浪费评估上!ThingJS 3D可视化开发不用愁
园区模型与全景图联动开启第一人称巡游
全景图其实是一种广角图,它的原理是等距圆柱投影。说白了就是将一个球体上的所有的点,全部投影到一个圆柱体的侧面上去,圆柱侧面展开图上包含了球体上所有的像素点。
thingjs
2021/08/12
6180
电子围栏可视化,提高安全运维效率
现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的监控领域,一般都是基于Web前端技术来实现 2D 可视化监控,本文采用ThingJS来构造轻量化的 3D 可视化场景,该3D场景展示了一个现代化商场的数字孪生可视化场景,包括人员的实时位置、电子围栏的范围、现场的安全情况等等,帮助直观的了解当前人员的安全状况。
thingjs
2021/08/19
6820
简单四步学会在数字孪生可视化场景中创建小地图!
众所周知,小地图在游戏中是至关重要的,小地图用于显示周围环境信息。在数字孪生可视化场景中小地图也是经常应用于场景中的,用来显示地图或者当前场景的视角。首先,小地图是以主角为中心的。其次,小地图上应该用图标来代替真实的人物或者物体模型,因为小地图通常很小,可能无法看清真实的模型。
thingjs
2021/07/07
6190
从零开始学习3D可视化之2D界面
在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的,3D“容器”提供了3D和2D的界面展示能力。上篇文章浅析过了3D空间界面,下面我继续学习一下2D界面如何与3D界面连接。ThingJS内置了div2d和div3d元素,创建2D界面时需要将元素插入到 div2d。
thingjs
2021/07/19
5920
从零开始学习3D可视化之摄像机自由飞行
我学习数字孪生可视化有一小段时间了,第一个制作目标就是在数字孪生可视化场景中实现一个自由飞行的摄像机。使用WSAD键控制摄像机的前后左右移动,使用QE控制摄像机的升降。
thingjs
2021/07/13
4460
从零开始学习3D可视化之事件绑定
先理解一下概念:事件,就是用户或者是浏览器执行的某种动作。例如:click、load等都是事件的名字。事件处理程序,就是响应事件的函数。事件处理程序的名字是以“on”开头的。
thingjs
2021/06/28
3860
万物可视之智能可视化管理平台
  Tarsier是优锘科技推出的一款可视化+大数据的IT运维管理产品,针对当前业务环境和技术环境下企业IT运维面临的结构复杂、数据碎片、变化常态、机制板结等问题,Tarsier提供以可视化、场景化为核心理念的系列产品助力企业解决问题
要不要吃火锅
2019/12/25
1.5K0
webgl和可视化应用是什么关系?不懂来看吧!
很简单,我们通过在线开发平台thingjs来阐述!  前提你要掌握js,假设你掌握了js,ThingJS 使用当今最热门的 Javascript语言进行开发。
要不要吃火锅
2019/12/11
8900
webgl和可视化应用是什么关系?不懂来看吧!
前端 3d开发怎么操作,什么流程?
我们都知道现今社会复合型人才是企业刚需,只会一项本领难以在企业中立足,即便是前端工程师,如果你只会敲代码改网页也是不行了,要多方面拓展自己的才能。比如研究可视化方向的3D开发。这就需要借助可视化pass平台平台来完成。
要不要吃火锅
2019/12/27
7060
前端开发人员用它就能做可视化应用!
有人说我一个前端工程师,只懂怎么写页面,如何能开发企业可视化应用?近几年可视化应用已经渗透到各行各业中,科技园、医院、学校、工厂、消防、安保、仓储无不涉猎!作为一个前端开发人员,你有必要再往前迈一步,多了解webgl技术,再沉淀一下Javascript。thingjs是一个面向物联网的3D可视化开发平台,可在线开发、对接数据、项目部署、实际应用~如果你想进步不妨一步哦!
要不要吃火锅
2019/12/12
7890
前端开发人员用它就能做可视化应用!
物联网可视化园区搭建步骤图示
ThingJS 场景中可以加载园区,加载后系统自动创建了园区、建筑、楼层、房间等物体对象,这些对象也自然把场景分成了不同的层级。
要不要吃火锅
2019/11/07
7420
物联网可视化园区搭建步骤图示
从零开始学习3D可视化之数据对接(3)
MQTT是ThingJS平台支持的四种数据对接方式之一,MQTT又称Message Queuing Telemetry Transport,消息队列遥测传输,是 ISO 标准(ISO/IEC PRF 20922)下基于发布 (Publish)或订阅 (Subscribe)范式的消息协议,可视为“资料传递的桥梁”。MQTT是一个轻量级协议,使用MQTT协议的中心是broker(服务器/代理),客户端通过订阅消息和发布消息进行数据交互。
thingjs
2021/07/23
3810
通过创建GeoLine给地图添加烟花图效果
ThingJS除了提供多种类型的模型外,还预置了多种粒子效果,包括:水、火、烟、雨、雪等,每种粒子效果按照不同的使用场景又有多种表现形式,可以满足在不同的天气条件下数字孪生可视化场景中的情况。那能不能在数字孪生可视化地图上添加效果呢?下面我就通过创建GeoLine(地理线)给数字孪生可视化地图添加烟花图效果。
thingjs
2021/07/29
6920
无人值守,智能变电站可视化管控系统
当前,进入“十四五”时期,在市场需求、技术创新与公共政策的协同推动下,我国数字经济发展规模将进一步扩大。电网作为与人民生活息息相关的领域也正加快着前进的步伐,以适应智能社会的发展。变电站作为电网的核心环节,智慧变电站的出现改变着传统变电站运维模式,实现变电站智能化、绿色化的转变,加快构建“无人值守+集中管控”的变电运维新模式的转型升级,亦推进了智慧电网的发展。
HT for Web
2021/05/06
1.6K0
手把手教你实现聚光灯效果
聚光灯是一种特殊的点光源,它能够朝着一个方向投射光线。聚光灯投射出的是类似圆锥形的光线,这与我们现实中看到的聚光灯是一致的。其灯光从一点发出,沿着某一个方向照射出一个锥形光照范围。聚光灯近似于一个有夹角范围限定的点光源。聚光灯可用于数字孪生可视化场景中模拟舞台、汽车车头灯,手电筒,台灯等光源效果,可添加至3D容器、摄像机等对象下方,对其中所有对应的数字孪生可视化对象生效。
thingjs
2021/07/06
1K0
手把手教你实现聚光灯效果
从零开始学习3D可视化之数据对接(2)
在日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和WebSocket,它们可是数据交互的利器,那么它们分别是什么?Ajax上篇文章已经讲过了,那WebSocket又是什么呢?
thingjs
2021/07/22
3650
推荐阅读
相关推荐
融入ThingJS 3D可视化方案,让城市管线更加智能、高效
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档