基于 WebGL(ThingJS)的社区水电燃气管线 3D 可视化管理演示

地下的管线错综复杂如何,图纸并不能完全满足实际需求,我们就用 ThingJS 平台来模拟一个小区水,电,天然气管线演示。
查看 DEMO

thingjs管线可视化

第一步,利用 CampusBuilder 搭建模拟场景。CampusBuilder 的模型库有各种各样的模型,使我们搭建出的场景更逼真。使用 CampusBuilde 创建层级,之后再给层级加外立面就出现了当前的效果。详情移步:CampusBuilder3D 场景制作工具

第二步, 初始化摄像机位置,添加四个按钮,并创建四个方法。

第三步,创建管线,我们这里写水管线以后的电线,燃气管线同理。这里简单说一下 PolygonLine,它继承 THING.LineBase,同样有贴图属性,可以自己从本地上传图片至页面资源后使用。

这里用到了两个方法:
1 ) buildingOpacity(num);
这个方法的主要作用就是为了将场景虚化,更好的展示我们的管线。
2 ) renderOrder();
这个我在代码中先注释掉了我们先看一下现在的效果:

thingjs3D管线可视化

注意:如果没有设置renderOrder();属性的 ,管线的渲染层级没有 building 高 ,就会导致有被 building 遮盖的 PolygonLine 无法正常显示,设置renderOrder();属性后,渲染效果正常

thingjs

最后一步,创建出电线以及燃气线

优锘科技thingjs管线可视化

附上完整代码,可以直接在ThingJS平台调试

现实中社区管线远比 DEMO 中复杂,开发者可以根据自身业务实际,使用 ThingJS 开发出更多三维可视化应用。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复