如何用webgl(three.js)搭建不规则建筑模型,客流量热力图模拟

野云飞 2019-03-06

webgl js code prototype view

本节课主要讲解如何用webgl(three.js)搭建一个建筑模型,客流量热力图模拟

使用技术说明:

  这里主要用到了three.js,echart.js以及一些其它的js 与css技术,利用websoket做实时数据传输。

技术亮点:

  用代码实现不规则建筑三维模型,模型层叠动画、三维会话气泡等

  实时绘制三维热力云图

  三维场景内外连线技术

  有效控制页面内存,及时回收绘画内存,防止内存泄漏。

项目前序:

客流量控制是大型公共场所把控安全的重要节点,实时把控各个部位的客流数量,对安全引导,紧急疏散、热门区域查看、商业规划起到很重要的作用。

首先 我们先在网上找两张国家会展中心的外景宏观图与内部结构图

图一:这是国家会展中心的外部宏观图,四叶草的外观(寓意繁荣诗意 “四叶草” 金秋盛情迎宾朋)(这张图来自网络,解释权归原作者所有)

图二:这是内部场馆宏观图(这张图来自网络,解释权归原作者所有)

 

界面效果:

a、首页展示场馆的3D模型总体态势,总人数,各个场馆实时客流,来源,年龄分析分类,以及各场馆客流量同比异常分析

国家会展中心实时客流监控

b、单击单个场馆热力详情,进去单个场馆实时客流界面,分析场馆内客流分布于统计情况

国家会展中心实时客流监控

c、点击全屏,全屏展示总然模型,双击单个场馆模型,进入单个场馆模型详细展示区国家会展中心实时客流监控

d、点击楼层选择,分解楼层,显示楼层内的实时客流分布情况

国家会展中心实时客流监控

e、点击客流范围选择,筛选出范围内的客流区域,有效导航引导客流分布,以及查看热点分布国家会展中心实时客流监控

重要代码实现

  一、模型代码,用js代码实现模型,而非导入模型文件,有效控制文件大小,提示加载渲染速度

    

View Code

  

View Code

 

  二、界面搭建代码

View Code

  

  三、逻辑控制代码

 

View Code

  四、接口对接代码

  

function ServerAPI() {
    //websocket接口
    this.webSocketUrl = "ws://xxx/monitoring/plaWebSocket";
    this.restFulUrl = "xxx";
    
}
ServerAPI.prototype.startServer = function () {
    var _this = this;
    startWebsocket(_this.webSocketUrl);
}
ServerAPI.prototype.getData = function () {

}



/*
*
*/
//获取获取所有场馆实时数据
ServerAPI.prototype.getAllRoomData = function (room,suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "headMap?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
//获取场馆的预警值
/*
http://118.24.33.58:8080/monitoring/pla/personNumWarn
参数:url?room={0}
*/
ServerAPI.prototype.getAlarmData = function (room, suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "personNumWarn?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
/**
 * 历史人流量数据接口
 */


/*
场馆来源地统计接口
*/
/*
性别比例数据查询统计接口
*/
/*
APP排名统计接口
*/
ServerAPI.prototype.getAppData = function (room, suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "personNumWarn?room=" + room;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
/**
年龄分布接口
*/
ServerAPI.prototype.getAgesData = function (room, starttime,suncFunc, failFunc) {
    var _this = this;
    var dataurl = _this.restFulUrl + "agesStatic?room=" + room + "&startTime=" + starttime;
    httpGet(dataurl, function (rs) {
        if (rs) {
            suncFunc(rs.result);
        }
    }, function (err) {
        failFunc(err);
    });
}
var serverAPI = null;

 

 

技术交流邮箱 有不足之处,还望指正:

    1203193731@qq.com

   交流微信:

    

其它交流文章

 

使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课

使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

如何用webgl(three.js)搭建一个3D库房-第一课

  

登录 后评论
下一篇
我是小助手
28799人浏览
2019-07-31
相关推荐
数据可视化之热力图
1575人浏览
2017-11-09 22:02:00
数字热力图
342人浏览
2016-04-17 13:29:00
数字热力图
458人浏览
2017-10-17 11:58:00
0
0
0
59