1引言
随着互联网的发展,计算机性能的进步,工业智能化水平的提升,以及现代浏览器对WebGL技术应用的支持,实现的功能越来越复杂化,智能设备在生产中的大量应用,管理起来越来越复杂。这些高新技术提高了企业的智能化水平和生产效率,同时也带来了相应的管理难度。WebGL技术的发展,为解决这些问题提供了良好的解决方案,实现了系统管理的更加高效智能。本文主要通过Three.js技术实现BIM模型的三维可视化渲染,实现安防系统的高效智能管理。 2核心技术简介
2.1WebGL技术简介
WebGL(全写Web Graphics Library)基于OpenGL ES,是一种在Web浏览器中渲染3D图形的JavaScript API,无需任何插件,通过WebGL技术,Web开发人员就可以借助系统显卡来实现在浏览器里更流畅地展示3D场景和模型,还能创建复杂的导航和直观的数据视觉化。相较于传统的Web交互式技术,WebGL技术有两大优势:
①它通过JavaScript实现Web交互式三维动画的制作,无需任何浏览器插件支持;②它利用底层的图形
硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口来实现。
2.2Three.js技术简介
如果直接使用WebGL进行开发三维模型系统,开发效率相对较低,技术门槛较高,需要开发者对计算机三维图形图像学、线性代数、矩阵运算等知识有深入的掌握,开发成本较大。为了解决上述问题,出现了基于JavaScript语言的第三方库Three.js。Three.js是WebGL的一个开源框架,是一款运行在浏览器中的3D引擎,它底层封装了相应的图形处理接口、矩阵运算接口等,可以通过JavaScript语言直接调用,可以大大减少开发者的工作量,具有代码体积小、加载速度快、方便使用的特点。
本文研究的Three.js技术主要包含在Web端进行3D场景渲染和对3D模型的一些动作行为操作(如漫游、定位、闪烁、高亮等动作行为)。Three.js框架主要由渲染3D的场景
基于WebGL技术的轨道交通综合安防系统三维可视化
应用研究
Research on3D Visualization Application of Integrated Security System of Rail Transit
Based on WebGL Technology
冶炼炉
谢燕刚,张毅,刘正寅
(四川旷谷信息工程有限公司,成都610000)
单向离合器轴承
XIE Yan-gang,ZHANG Yi,LIU Zheng-yin
(Sichuan Cr Information Engineering Co.,Ltd.,Chengdu610000,China)
【摘要】随着GIS向Web化,二维向三维化发展,三维WebGL已经逐渐成为GIS学科和BIM学科发展的热点,涉及科技发展的多个领域,极具技术研究和应用价值。基于WebGL技术的轨道交通综合安防系统三维可视化应用研究涉及WebGL技术、Three.js技术、CSS+HTML+JS技术、Jquery技术、JSON技术等。论文基于WebGL的三维场景可视化关键技术,主要是通过3DMax软件将模型转换成obj格式,再通过Three.js框架的OBJLoader加载器加载obj模型,最后在Web端进行三维可视化渲染。
pc104总线【Abstract】With the development from GIS to Web and from2D to3D,3D WebGL has gradually become the hot spot in the development of GIS and BIM,which involves many fields of science and technology development,and is of great technical research and application value.The 3D visualization application research of rail transit integrated security system based on WebGL technology involves WebGL technology, Three.js technology,CSS+HTML+JS technology,Jquery tech
nology,JSON technology and so on.The key technology of3D scene visualization based on WebGL is to convert the model into obj format through3DMax software,and then load the obj model through the OBJLoader of Three.js framework,and finally perform3D visualization rendering on the Web side.
【关键词】WebGL;BIM模型;三维可视化;Three.js
【Keywords】WebGL;BIM model;3D visualization;Three.js
【中图分类号】U231;TP18【文献标志码】A【文章编号】1673-1069(2021)02-0177-03
【作者简介】谢燕刚(1986-),男,四川成都人,工程师,从事产品研
发研究。
177
(Scene )、摄像机(Camera )、光源(Light )、渲染器(WebGLRenderer )、控制器(Control )等基本组件组成。场景是一个对应的空间,
所有物体的容器,所需要的模型、光源和图文标注等都必须通过Add 方法添加到场景。
摄像机是三维世界中的观察者,分为透视投影摄像机和正交投影摄像机,主要起到模拟人员观察浏览作用。光源对应的是现实环境中的各种光,如环境光、平行光、点光、聚光等,如果没有光源,就不可能看到任何渲染结果。渲染器是将导入的三维模型、设置好的光源等在相机设定好的角度、远近可视范围内,通过渲染函数渲染成真实物体并以平面形式显现出来。控制器可通过键盘、
鼠标控制相机的移动。3WebGL 技术实现
在进行Three.js 开发前,需要通过3DMax 导出obj 格式模型和mtl 材质文件,注意mtl 文件中的乱码和贴图路径,通过Three.js 技术进行开发时,需要按以下流程进行开发实现:
步骤1:下载Three.js 文件库并引入Three.js 库及相关js 库。
步骤2:在对应的HTML 页面上添加canvas 标签。
步骤3:创建场景并在场景中初始化和加载相应的关联因素。
关联因素包含:设置相机的远近可视范围及相机在整个3D 环境中的位置和焦点位置;设置光源的类型,光源颜和强度;创建模型加载器加载模型并设置模型的大小、位置和材质;加载标注,通过创
建精灵创建标注模型,设置标注的材质纹理贴图、模型大小和位置;创建渲染器对象设置渲染方式、渲染区域尺寸及背景颜等;设置控制器,使模型可以放大缩小移动。
步骤4:将场景和相机加载到渲染器执行渲染操作。
步骤5:对模型中各种设备对象的动作行为和交互功能的操作,如实时报警、定点定位和三维漫游等功能。
4安防BIM 模型在Web 端的可视化应用
在轨道交通综合安防系统中,通过BIM 模型在客户端Web 浏览器的可视化展示、
信息查询,能够更加直观地了解模型信息和各个设备模型安装的具体位置,方便监控人员对各个设置的实时监控,通过触发系统的实时报警、精准定位等技术实现系统的精确化、智能化,实现了系统管理的更加
高效管理,大大提高了模型远程可视化管理。
系统模型采用3DMax 建模,导出obj 格式文件,通过Three.js 技术初始化场景,obj 加载器加载模型,设置相机、光源及渲染器等,
最终通过Web 浏览器进行可视化渲染,模型在Web 端渲染结果如图1所示。
模型操作:
用户可以通过鼠标左右键及滚轮实现模型的旋转、平移
及缩放,如图2所示。
点击模型中的设备,设备高亮显示并弹出设备详情信息,如图3所示。
资源点信息
收腰羽绒服
资源点编码资源点名称所属子系统资源点类型品牌名称设备状态IP 地址端口号线路名称站点名称部署位置安检门前方
天府广场站成都地铁1号线8000
10.20.72.37
在线大华机视频监控安检操作台QJ-0005×
图1模型渲染全景
图2模型
图3模型设备高亮
178
模型设备定位,通过调用定位接口,模型相机直接定位到指定的设备位置,查看了解设备的详情信息,如图4所示。
模型漫游飞行,相机会按第一人称视角根据指定的路线进行漫游飞行,对整个模型路线进行巡查,可
以查看模型中的各个设备位置设计是否合理等。
模型报警,如在现场有人非法闯入触发红外报警等,系统通过调用报警接口直接定位到触发点的位置,并对报警设备进行高亮闪烁,如图5所示。
5结论
随着技术的不断发展,对WebGL技术的要求会越来越
高,技术研究将引发更多人的参与,对BIM模型可视化的技术的研究方法也会越来越多,通过对BIM模型的可视化呈现,工作人员可以在Web端直观了解模型信息,各个设备的安装布置信息,对设备进行可视化实时监控,实现高效智能管理。
【参考文献】
【1】晁阳,牛志伟,齐慧君.基于WebGL的BIM模型可视化研究[J].水电能源科学,2020,38(09):79-82.
【2】朱海林,陈登峰,王帅举.基于WebGL的BIM模型三维可视化技术研究[J].科技风,2019(31):123.
【3】李倩.基于WebGL的3D技术在网页中的运用[J].电子测试,2020 (12):125-126.
【4】聂帅,秦爽,麦文.通过Three.js引擎加载OBJ模型[J].科学技术创新,2019(14):80-82.
主权利,发挥主人翁作用,维护全国人民总体利益,维护职工合法权益,发动和组织职工完成生产任务和工作任务,组织职工参加企业事业的民主管理和民主监督,提高职工思想政治素质和文化技术素质等职责。国有企业工会组织更应该成为职工诉求表达的主渠道,作为职工众性组织,工会充分发挥职工娘家人作用,用心倾听职工心声,搭建起职工与管理者沟通的桥梁。通过走访调查三家企业发现,工会人员现多为45岁以上职工或者为临近退休退居二线的中层领导,未有年轻人在工会任职,青年职工的呼声因此也得不到很好的传达。因此,广西区内国有企业应注重工会岗位青年职工的介入、培养,完善晋升渠道,倾听青年职工的心声。 第二,管理者要定期深入青年员工队伍中去,了解青年员工诉求。由于区内国有企业行政化、论资排辈、“吃大锅饭”等问题的存在,青年员工的诉求被忽视,因此,企业管理者应从职工中来到职工中去,了解青年员工思想动态,通过座谈交流、职工代表巡查等多种途经倾听基层青年员工意见,搜集整理青年员工诉求信息。通过调研发现,青年员工利益诉求主要集中在七个方面:工作与家庭兼顾、公平正义实现、收入正常增长、同工同酬管理、休息休假疗养、学习培训及职业生涯通畅、应有的知情权和话语权。“90后”员工还在职业生涯初期,可塑性较强,他们讨厌形式主义,拒绝做作,国有企 业管理者只有密切联系青年员工,赢得青年员工认可,青年员工才会敞开心扉,员工诉求通道实现水到渠成。
第三,加强青年员工思想疏导,多为青年员工提供诉求渠道,满足青年员工自我实现需求。“95后”甚至“90后”青年员工都是刚走出大学的象牙塔,从学生到职场新人,求知欲望强烈,渴望自己得到单位领导和同事的认可,在领导和同事面前有时会急于表现自己,造成个人与团队关系紧张。企业管理者应积极开展思想引导,定期举办员工素质拓展活动,增强团队凝聚力,同时,也为青年员工提供倾诉的机会,避免矛盾升级扩大、青年员工离职的发生。建立青年员工与国有企业领导联络员制度,重视青年员工诉求,发挥企业职工民主管理体系的作用,鼓励青年员工参与企业的管理,畅通基层青年员工与国有企业管理者之间的信息渠道,为青年员工自我实现提供多种渠道。
【参考文献】
【1】云南电网屏边供电公司课题组,张重昆.青年员工需求分析与激励探索[J].中国电力企业管理,2014(20):36-41.
【2】张士卿.X公司基层员工流失原因与对策研宄[D].北京:北方工业大学,2016.
【3】李正辉.广西国有发电企业青年人才显性流失问题研究[D].南宁:广西大学,2019.
载重车(上接第149页)
图4模型设备定位
图5模型报警
锁架179