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

  

目录
相关文章
|
25天前
|
Web App开发 JavaScript 前端开发
深入理解Node.js事件循环和异步编程模型
【10月更文挑战第9天】在JavaScript和Node.js中,事件循环和异步编程是实现高性能并发处理的基石。本文通过浅显易懂的语言和实际代码示例,带你一探究竟,了解事件循环的工作原理及其对Node.js异步编程的影响。从基础概念到实际应用,我们将一步步解锁Node.js背后的魔法,让你的后端开发技能更上一层楼!
|
2月前
|
JavaScript 前端开发 数据库
探索Node.js中的异步编程模型
【9月更文挑战第23天】在Node.js的世界里,异步编程是核心的魔法,它让这个平台能够处理高并发请求。本文将带你深入理解Node.js的异步编程模型,通过代码示例和直观的解释,我们将一起揭开异步编程的面纱。
41 16
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
21 2
|
21天前
|
JavaScript 前端开发
JS隐式类型转换规则
【10月更文挑战第9天】 不同的 JavaScript 引擎可能在隐式类型转换的具体实现上存在一些细微差别。理解这些隐式类型转换规则对于正确处理数据和避免错误非常重要。
16 0
|
2月前
|
Web App开发 JavaScript 前端开发
探索Node.js中的异步编程模型
【9月更文挑战第21天】在现代Web开发中,Node.js以其非阻塞I/O和事件驱动的特性成为热门选择。本文将深入探讨Node.js的异步编程模型,揭示其背后的原理,并通过示例代码展示如何高效利用异步特性来处理并发任务。
|
2月前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模型
【9月更文挑战第11天】在JavaScript的运行环境中,Node.js因其高效的异步处理能力而备受青睐。本文将深入浅出地介绍Node.js如何处理异步操作,包括回调函数、Promises和async/await等概念,并探讨它们对后端开发的意义。
45 5
|
3月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
21 1
js之DOM 文档对象模型
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
49 1
|
3月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
45 1
|
3月前
|
编解码 缓存 算法
Three.js如何降低3D模型的大小以便更快加载
为加快600MB的3D模型在Three.js中的加载速度,可采用多种压缩方法:1) 减少顶点数,使用简化工具或LOD技术;2) 压缩纹理,降低分辨率或转为KTX2等格式;3) 采用高效文件格式如glTF 2.0及draco压缩;4) 合并材质减少数量;5) 利用Three.js内置优化如BufferGeometry;6) 按需分批加载模型;7) Web Workers后台处理;8) 多模型合并减少绘制;9) 使用Texture Atlas及专业优化工具。示例代码展示了使用GLTFLoader加载优化后的模型。
365 12