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&#