如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟-阿里云开发者社区

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

2019-03-06 1950

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本节课主要讲解如何用webgl(three.js)搭建一个建筑模型，客流量热力图模拟使用技术说明：　　这里主要用到了three.js，echart.js以及一些其它的js 与css技术，利用websoket做实时数据传输。

本节课主要讲解如何用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;