ThreeJS 热力图
时间:2020-05-21
本文章向大家介绍ThreeJS 热力图,主要包括ThreeJS 热力图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
环境
- ThreeJS 107版本
- three.min.js
- OrbitControls.js
- heatmap.min.js
说明
地球上添加热力图的原理是先生成平面的热力图,绘制在canvas上,再将canvas作为材质贴到地球球体上。可以实现色带配置,以及辐射范围。
解决方案
-
创建球的过程参见"ThreeJS制作地球"
-
创建热力图group
var gHeatmap = new THREE.Group();
- 使用heatmap.js库,创建heatmap对象
var heatmap = h337.create({
container: document.getElementById(_heatmapDomid),
width: 512,//这里一定要2的n次方倍数,否则控制台报警告(定死,与后面坐标系计算强关联)
height: 256,//这里一定要2的n次方倍数,否则控制台报警告(定死,与后面坐标系计算强关联)
blur: '.8',
radius: _heatmapStyle.radius ? _heatmapStyle.radius : 10,//辐射圈范围大小e
alpha: true,
// opacity: 0.5,//透明度
// minOpacity: 0.1,
// maxOpacity: 0.9,
//色带配置(比例)
gradient: _heatmapStyle.gradient ? _heatmapStyle.gradient : { '.5': 'yellow', '.8': 'green', '.95': 'red' },
backgroundColor: 'rgba(0,102,256,0)'
//回调返回色带
// onExtremaChange: function (res) {
// console.log(res);
// }
});
- 构造热力图数据,构造对象数组,x、y、value的数据键值对,并计算出最大值(作为热力图值上限)
var max = 0;//最大值
var data = [];//数据源
for (var i = 0; i < _heatmapData.length; i++) {
//计算坐标,这里与canvas分辨率有关(不知为啥512*256分辨率下只能传整数??)
var coord = { x: ((_heatmapData[i].x + 180) / 360 * 512).toFixed(0), y: ((90 - _heatmapData[i].y) / 180 * 256).toFixed(0) };
data.push({ x: coord.x, y: coord.y, value: _heatmapData[i].value });
//计算最大值
max = max >= _heatmapData[i].value ? max : _heatmapData[i].value;
}
heatmap.setData({
max: max,
min: 0,
data: data
});
- 将生成的热力图canvas作为MeshLambertMaterial材质赋给地球
texture = new THREE.Texture(heatmap._renderer.canvas);
var material = new THREE.MeshLambertMaterial({
map: texture,
transparent: true,
opacity: 1
});
- 构造一个跟地球大小相同的球,将材质赋给这个球,添加到场景中
var mesh = new THREE.Mesh(new THREE.SphereGeometry(_earthOptions.earthBallSize, 50, 50), material);
gHeatmap.add(mesh);
scene.add(gHeatmap);
- 执行渲染
// 执行函数
function render() {
if (handle) {
cancelAnimationFrame(handle);
}
//是否开启了热力图,如开启则开启热力图渲染
if (texture) {
texture.needsUpdate = true;
}
renderer.clearDepth();
//自转
scene.rotation.y += _earthOptions.autorotationSpeed ? _earthOptions.autorotationSpeed : 0;
renderer.render(scene, camera);
orbitcontrols.update();
handle = requestAnimationFrame(render);
}
附上效果图
原文地址:https://www.cnblogs.com/giser-s/p/12928647.html
- Python(3):文件读写与异常
- 向ASP.NET Core迁移
- Gitlab CI 自动部署 asp.net core web api 到Docker容器
- 从XMLHttpRequest请求响应里getResponseHeader(header)报错:Refused to get unsafe header "**" 问题解决
- 全面理解 ASP.NET Core 依赖注入
- jq实现上传头像并实时预览功能
- 初探领域驱动设计(2)Repository在DDD中的应用
- js取整并保留两位小数的方法
- 异步编程 In .NET
- 判断标签是否包含class的方法
- vue.js使用props在父子组件之间传参
- JS中使用正则表达式替换对象里的大小写
- JS中const、var 和let的区别
- 动态计算rem的js代码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 原创 | 想做推荐算法?先把FM模型搞懂再说
- 活见鬼,明明删除了数据,空间却没减少!
- 原创 | Git仓库的提交记录乱成一团,怎么办?
- 原创 | 平面内有N个点,如何快速求出距离最近的点对?
- 原创 | codeforces 1426F,初学者也能做,div3的最难题
- 安全研究 | YARA规则阻止Windows事件日志记录
- 研究人员如何使用Shhgit搜索GitHub中的敏感数据
- 使用nProbe监控移动网络(2G,3G和LTE)
- Mykings僵尸网络新变种已感染超5万台电脑
- 谁告诉你鸿蒙(HarmonyOS)不能在macOS下玩,一副没见过世面的样子!
- 连Python产生器(Generator)的原理都解释不了,还敢说Python用了5年?
- WordPress插件File-Manager任意文件上传复现
- CVE-2020-15778:OpenSSH命令注入漏洞复现
- TokyoWesterns CTF 6th 2020 部分WP
- 极客巅峰2020 部分WriteUp