小强

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

2022年3月1日 #

WebGL打造以数据驱动的3D可视化智慧工厂

随着IT信息技术和移动端的发展,Html5+3D(Webgl)技术已经悄然崛起,而3D工厂厂房在数字化的今天,已经被越来越多的公司和企业应用,三维数字工厂模型的应用,加快了工厂厂房,设备,传感器、管道罐体输送、监测控制等各个环节的效率。

对工厂园区的生产车间、生产设备、监控设备等进行3D建模,实现物理工厂园区到3D虚拟工厂园区的数字化、可视化的转化。使工厂生产更为流畅,减少不必要的错误和开支,节约成本。避免失误导致意外产生,并能提高操作者的熟练度,使工作效率大幅度提高。

案例功能

管道流向监测

可对工厂的管道(输气管道、输水管道、输油管道等)流向进行实时监控,根据流向、流速对管道进行三维模拟,从而达到可视化监测监控及模拟演练效果。

使用THREE.TubeGeometry对象构造管道模型

//创建管道
function createShape(id,color,position,flowto){
    var Vector3_Arry =[]
    for(var i=0;i<position.length;i++){
        Vector3_Arry.push(new THREE.Vector3(position[i].x, 10, position[i].y));
    }
    var curve = new THREE.CatmullRomCurve3(Vector3_Arry);
    var tubeGeometry = new THREE.TubeGeometry(curve, 50, 3, 50, false);

    var textureLoader = new THREE.TextureLoader();
    var texture = textureLoader.load(createShapeColor(color));
    // 设置阵列模式为 RepeatWrapping
    texture.wrapS = THREE.RepeatWrapping
    texture.wrapT=THREE.RepeatWrapping
    // 设置x方向的偏移(沿着管道路径方向),y方向默认1
    //texture.repeat.x = 20;
    var shapeLength = getShapeLength(position);
    flowto = flowto || '+';
    texture.repeat.set(shapeLength/75, 1);
    var tubeMaterial = new THREE.MeshPhongMaterial({
      map: texture,
      transparent: true,
    });

    var tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial);
    tubeMesh.flowto = flowto;
    scene.add(tubeMesh);
}

设备实时数据

点击设备可以查看实时数据和运行状态,在三维场景中实时体现状态和值,根据设备不同阈值模拟设备报警。

使用canvas绘制弹窗

function createNoteCanvas(id){
	var title ="居民负荷";
	var data = [
     {name: "A相电压", value: "10040863.2"},
     {name: "B相电压", value: "-8086002"},
    ];

    var canvas = document.createElement("canvas");
    var ctx=canvas.getContext('2d');
    canvas.width=550;
    canvas.height=data.length*14+30;
    canvas.style.border="1px solid #ccc";
    ctx.fillStyle="#0C4657";
    strokeRoundRect(ctx,0,0,canvas.width,canvas.height,4.5);
	fillRoundRect(ctx,1,1,canvas.width-2,canvas.height-2,5);
    var rectH=6;
    var rectW=20;
    var titleH=12;
    ctx.scale(2,2)
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#ccc";
    ctx.textAlign = "center";    

    ctx.fillStyle = "#FFFFFF";
    ctx.fillText(title,32,titleH);

    titleH += 14;
    ctx.font="5pt Arial";
    for(var i= 0;i<data.length;i++){
        ctx.fillStyle = "#FFFFFF"; 
        ctx.textAlign="right";
        ctx.fillText(data[i].name+":",60,rectH*i+titleH); 

        ctx.fillStyle = data[i].color != undefined?data[i].color:"#FFFFFF";
        ctx.textAlign="left";
        ctx.fillText(data[i].value,60,rectH*i+titleH);

        if((i+1)<data.length){
             ctx.fillStyle = "#FFFFFF"; 
             ctx.textAlign="right";
             ctx.fillText(data[i+1].name+":",200,rectH*i+titleH);

             ctx.fillStyle = data[i+1].color != undefined?data[i+1].color:"#FFFFFF";
             ctx.textAlign="left";
             ctx.fillText(data[i+1].value,200,rectH*i+titleH);  
             i++
        }
    }
    return canvas;
}

使用THREE.SpriteMaterial让创建的弹窗信息永远正对屏幕

function createNote(id,x, z){
	var oldId = "";
	if(spriteNote !=null){
		oldId = spriteNote.name.split("$")[1];
		scene.remove(spriteNote);
		spriteNote.name ="设备$none";
	}
	if(spriteNote ==null || id != oldId){
		var canvas = createNoteCanvas(id);
		var texture = new THREE.Texture(canvas);
		texture.needsUpdate = true;

		var spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
		spriteNote = new THREE.Sprite( spriteMaterial );
		var positionInfo =getNotePositionInfo(x, z);

		spriteNote.position.set(positionInfo.x,positionInfo.y,1140);
		spriteNote.scale.set(canvas.width*positionInfo.radio,canvas.height*positionInfo.radio,1);
		spriteNote.name = "设备$" + id;
		//图片自适应尺寸
		spriteNote.material.map.minFilter = THREE.LinearFilter;
		scene.add(spriteNote);
	}
}

路径巡检

在工厂、园区中制度巡检路径,结合巡更点、设备和传感器实时数据、视频监控三维仿真巡更。在三维场景中模拟巡更路径第一人称漫游,同时设备数据报警和视频监控达到三维中巡检效果,高效代替人工巡检。 

整体效果

 

参考文案

Three.js教程

Three.js中文网

更多3D案例

图扑软件 - 构建先进 2D 和 3D 可视化所需要的一切

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(595) 评论(0) 推荐(0) 编辑

微信小程序网悦新闻开发--功能介绍(一)

摘要: 目录 微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新闻开发--我的模块开发(五) 微信小程序网悦新闻开发--自定... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(200) 评论(0) 推荐(0) 编辑

基于jsplumb的流程引擎开发

摘要: 作为一个90后的老码农,有着自己的倔强,虽然市面上有很多优秀的流程引擎,但是还是想自己也造个轮子,趁着疫情期间,基于jsplumb简单开发了一个简易的流程引擎,下面是前端编辑效果。 我的思路比较简单: 1.流程节点只有三种类型,开始节点,流程节点和结束节点。... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(224) 评论(0) 推荐(0) 编辑

react-native人脸识别采坑之旅--人脸采集

摘要: 作为一个只会做前端的开发,做一些普通的开发还好说,每次react-native碰到需要集成别的插件就非常头疼。最近公司考勤会议签到想弄点新花头,要求人脸考勤签到,下面是我在使用react-native-camera做人脸采集时候遇到的一些坑。 首先看官方文档g... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(155) 评论(0) 推荐(0) 编辑

基于bootstraptable封装一个过滤组件(带文本,下拉,弹窗多选搜索)

摘要: 最近公司基于bootshraptable的表格过滤条件做的特别多,每个过滤框都要去写一个方法积压了一大堆方法,每次改动也非常麻烦,然后就基于之前的开发封装了一个通用过滤组件,下面是表格具体功能演示: 组件参数 url: "",--获取表格数据的url... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(36) 评论(0) 推荐(0) 编辑

DevExpress XtraReports控件通过代码创建主从报表

摘要: 如果一份报表是用来显示分层数据源的数据,则它通常被称为主从报表。本文介绍了在DevExpress XtraReports控件基于DetailReport通过代码绑定主从数据源生成主从报表。以下是报表效果图。 前端设计 前端插入2个嵌套的DetailRepor... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(132) 评论(0) 推荐(0) 编辑

类似问卷星的开源项目Tduck填鸭部署到Linux服务器

摘要: 1.去gitee上把前后端代码下载到本地。 后端源码:https://gitee.com/TDuckApp/tduck-platform 前端源码:https://gitee.com/TDuckApp/tduck-front 2.使用idea打开tduck... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(618) 评论(0) 推荐(0) 编辑

基于jsplumb开发厂区设备分布图

摘要: 随着IT信息技术的发展,工业化和信息化结合的场景越来越多。下面是某公司通过信息化系统动态维护设备开发的案例。 整体效果 设备管理 可以从左侧把需要的设备拖拽到右边的画布,双击可以维护设备的信息以及点位。2个设备之间可以添加连线。 相关代码 $("#fl... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(234) 评论(0) 推荐(0) 编辑

Microsoft Visual Studio 配置Oracle开发环境

摘要: 使用Visual Studio默认驱动去连接oracle会报 需要 Oracle 客户端软件 version 8.1.7 或更高版本 错误,我们需要配置oracle开发环境 1.首先去oracle官方下载对应Visual Studio相对应版本的oracle ... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(154) 评论(0) 推荐(0) 编辑

SqlServer通过链接服务器跨库查询多个数据库合并结果集

摘要: 下面是不同IP下面对应不同的数据库,通过下面脚本可以把每个库的数据都抓取出来。 以下结果集是多个数据库跨库合并的结果 。 以下是sql代码: --定义字段 declare @sDbIP varchar(100),--数据库IP @sDbName varc... 阅读全文

posted @ 2022-03-01 20:55 搬砖狗-小强 阅读(217) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示