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

[xiangbulala]

地下的管线错综复杂如何，图纸并不能完全满足实际需求，我们就用 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 开发出更多三维可视化应用。

 

[randyo]

大神啊！ Mark

[xiangbulala]

@randyo 试试 thingjs...简单~~

[randyo]

@xiangbulala 可视化有什么好的教程吗

[xiangbulala]

@randyo 3D 的话 three.js 啊，three.js 学起来门槛比较高，也可以试试 thingjs
腾讯课堂教程： https://ke.qq.com/course/list/webgl?tuin=1022909f
优酷搜一下 thingjs 有不少项目案例的视频

[momocraft]

原来 thingjs 是做这个的, 最近在知乎常看到广告

[7gugu]

dalao,那个管线的位置要怎么确定？是有软件可以导入还是计算出来？

[randyo]

@xiangbulala 谢谢了

[Geeker]

模型建的好

[izoabr]

demo 是不是挂了？

[yesiamloki]

请问能做缓冲区分析吗

[xiangbulala]

@momocraft 还有 V2EX 啊~~

[xiangbulala]

@Geeker 公开了一批模型可以直接用~

[xiangbulala]

@yesiamloki 现在还没有专门的这个功能，不过可以通过 API 实现

[xiangbulala]

@yesiamloki 可以关注一下 thingjs 的[citybuilder]( http://www.thingjs.com/guide/?m=city)，3D 城市的可视化工具，目前还比较简单，迭代演进中，欢迎提提意见

[xiangbulala]

@7gugu 目前管线还没有产品化的工具，项目中有几种实现方式
1、直接 max 中模型建好
2、在搭建工具中摆好点位，程序生成管线
3、按照项目方提供的数据和逻辑程序生成管线

[lyseky]

想学，国内教程太少了

[xiangbulala]

@lyseky thingjs 把 three.js 封装了，基本上懂 js 就能搞定，bilibili 有视频教程： https://www.bilibili.com/video/av37691017

[eurokingbai2]

safari 不显示，chrome 卡到带不动。。

[dd0754]

卧槽

[xieguanglei]

难得看到 V2 上有 WebGL 相关的帖子，借楼插个广告吧： https://alibaba.github.io/G3D/cn/

一个小巧精致的材质渲染引擎，和 three.js 的定位有些类似，但是更小，更专注于「渲染」这件事本身，把渲染引擎对 DOM API 的依赖完全地解耦出来了。

目前还处于项目的早期，欢迎对 WebGL 感兴趣，而且有一定技术实力的同学加入一起共建。

[xiangbulala]

@eurokingbai2。。。啥配置...

[ala2008]

@xieguanglei 已 star :smile:

[hello20019]

手机上打不开…… chrome 和 safari 都会页面崩溃

[xiangbulala]

@hello20019 我试了下魅族自带浏览器打开没啥问题

[hello20019]

@xiangbulala ios 上 chrome 和 safari 都会崩溃
https://i.loli.net/2019/01/05/5c3066024c0a2.png
https://i.loli.net/2019/01/05/5c30660394318.png

[dk7952638]

ThingJS 有开源替代品么？

[xiangbulala]

@dk7952638 (〃'▽'〃)现在 thingjs 不开源，不过除了项目发布都是免费的，收费主要是去 logo，离线部署

[xiangbulala]

@hello20019 嗯 确实 iPhone 上有些问题，会尽快修复

[pinghai]

试用试用 ThingJS，不断提升国内 WebGL 引擎水平啊..

[lyseky]

@xiangbulala 好，今年学一下

[but0n]

@xieguanglei 不依赖 DOM API 是什么意思？

[majilei]

不错

[xieguanglei]

@but0n 就是框架本身不会调用 DOM API，只需要初始化的时候注入一个具有 getContext 方法的对象（可以是 Canvas
也可以是你自己的实现），框架不负责加载图片、模型，适应窗口尺寸变化等等。这么做的原因，是因为我们需要可以跑在 [GCanvas]( https://github.com/alibaba/GCanvas) 上（进而可以跑在 ReactNative 或 Weex 上），而且这样做这个渲染引擎也会更小，更纯粹于「渲染」。

[jfhy0901]

最近正好需要这个，有时间研究一下！先收藏了

[but0n]

@xieguanglei DOM 也有一些可以利用的功能，Aframe 的 ECS 就有依赖 DOM 树

[circleee]

你们到底是怎么收费呀？

[xiangbulala]

@circleee 场景搭建的组件都是免费使用的（包括 campusbuilder 原模模搭，citybuilder 城市搭建工具、chartbuilder 大屏图表搭建工具），在线开发演示三维场景也是免费的，只有成为商业开发者（离线演示场景）、在线项目发布（去 logo ）、项目离线部署才收费

[STRRL]

emmm 好像已经有成熟的 2b 公司在做这个了 云烟好像有一套这个

[Nicoco]

老哥稳

[xiangbulala]

@STRRL 云烟？生产香烟的云烟么

[gjx870327]

不开源 有什么好说的 =。=||

[ecmascript2020]

神奇 公交车站台那边那个女的还会动

[xiangbulala]

@ecmascript2020 哈哈哈你不说我都没发现，那个模型带动画

[STRRL]

@xiangbulala 对 云南烟草公司

[lovelybear]

其实还不如拿 Unity 做，最后导出成 webgl 的

[xiangbulala]

@lovelybear 主要面对只有前端工程师，不熟悉 webgl 的用户，降低 3D 可视化应用开发门槛

[blockmin]

我前东家就是搞 3D 可视化的，但我在运营部门，完全不懂

[xiangbulala]

@blockmin 哪家啊？~

[yao978318542]

提一个小 BUG 那几个演示按钮 重复点击的话 是不是会重复加载啊 而且好像不能取消

[qiuyk]

这不就是 BIM...么

[blockmin]

@xiangbulala 优锘科技

[xiangbulala]

@yao978318542 主要是...没做

[xiangbulala]

@qiuyk 可以理解是轻量的 bim，偏向应用于可视化管理而不是建造过程

[xiangbulala]

@blockmin 就是优锘科技哈哈哈

[yao978318542]

挺不错了 厉害