three.js热力图

three.js热力图是通过在canvas上绘制辐射圆来实现的。首先，需要获取每一个区域的温度值和对应的坐标值。然后，对每一个温度位置绘制出辐射圆，辐射圆的目的是为了获取每一个像素点的透明度值。透明度的值越高，则该区域的温度越高。接着，通过透明度的高低在调色盘上进行颜色的选择，调色盘是一个渐变的色带，长度为256，高度为1。最后，将透明度为0的像素点设置为青色。将绘制好的canvas赋给平面对象即可完成three.js热力图的绘制。

以下是实现热力图的具体步骤：
1. 创建canvas和上下文对象，并设置canvas的大小。
2. 循环调用绘制辐射圆的方法，绘制每个温度位置的辐射圆。
3. 获取辐射圆每一个像素点的rgba值（data）。
4. 从调色板中根据透明度通道a的值获取对应的颜色值。
5. 将透明度为0的像素点设置为青色。
6. 将获取到的canvas对象作为纹理图给mesh，完成热力图的绘制。