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

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

 

 

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

    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库房-第一课

  

目录
相关文章
|
3月前
|
定位技术 内存技术
GIS空间分析 三维分析4 制作飞行动画
本文中,我们利用ArcScene软件用3种方法制作了飞行动画
40 0
|
4月前
|
数据可视化 C++
【变化检测】多时相遥感影像变化检测 Qt界面可视化 / 实现卷帘功能(附有完整代码)
【变化检测】多时相遥感影像变化检测 Qt界面可视化 / 实现卷帘功能(附有完整代码)
|
5月前
|
Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏05图像仿射变换(平移和缩放操作)
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏05图像仿射变换(平移和缩放操作)
67 0
|
8月前
|
机器学习/深度学习 编解码 人工智能
首篇BEV感知生成工作!BEVGen:从鸟瞰图布局生成环视街景图像
本文提出了BEVGen,这是一个条件生成式模型,它合成了一组真实且空间一致的环视图像,这些图像与交通场景的BEV布局相匹配。BEVGen结合了一种新颖的交叉视图转换和空间注意力设计,学习相机和地图视图之间的关系,以确保它们的一致性。BEVGen可以精确地渲染道路和车道线,以及在不同的天气条件和时间生成交通场景。
首篇BEV感知生成工作!BEVGen:从鸟瞰图布局生成环视街景图像
|
12月前
Threejs实现宇宙中地球动态展示和卫星绕地运动
Threejs实现宇宙中地球动态展示和卫星绕地运动
633 0
Threejs实现宇宙中地球动态展示和卫星绕地运动
|
12月前
|
存储 JSON 数据格式
Threejs加载城市obj模型,加载人物gltf模型,Tweenjs实现人物根据规划的路线运动
Threejs加载城市obj模型,加载人物gltf模型,Tweenjs实现人物根据规划的路线运动
672 0
Threejs加载城市obj模型,加载人物gltf模型,Tweenjs实现人物根据规划的路线运动
|
12月前
|
图形学
3D游戏建模必备技巧一人物模型贴图布线!(99%小白收藏)
今天跟大家好好聊一聊怎么贴图、布线。 首先, 你得看看你自己在做的人物模型 是游戏人物角色还是影视人物角色, 虽然都是人物模型, 但两者在贴图、 布线的方法上还是有一些差别的。
191 0
3D游戏建模必备技巧一人物模型贴图布线!(99%小白收藏)
|
算法 索引
【D3.js - v5.x】(5)绘制力导向图 | 附完整代码
【D3.js - v5.x】(5)绘制力导向图 | 附完整代码
549 0
【D3.js - v5.x】(5)绘制力导向图 | 附完整代码
|
前端开发 数据可视化 定位技术
Threejs - 搭建三维场景
Threejs - 搭建三维场景
Threejs - 搭建三维场景
推荐文章
更多