使用Three.js实现热力图（heatMap）的绘制

在项目开发过程中，需要将每一块区域的温度通过热力图的方式进行呈现，通过在网上查阅一部分资料和学习，想要实现这一技术需要在canvas上进行绘制。首先简单的说一下整体的思路：
1、我们需要每一块区域的温度值和该温度所对应的坐标值，然后对每一个温度位置绘制出辐射圆椭圆，辐射圆的目的是为了获取每一个像素点的透明度的值（0-255），透明度的值越高则该区域的温度越高，对每一个像素点通过透明度的高低进行着色。
2、这时需要一个调色盘 (即就是一个渐变的色带)，获取色带上长度为256 高度为1的色带（即getImageData(0, 0, 256, 1).data）调色板的值刚好为（256个颜色组（rgba）组成），根据透明度的值就可以在这个素组中进行颜色的选择（即如果该像素点透明度为178 则该像素点的颜色rgb就是 data[178x4 +1] ,data[178x4 +2],data[178x4 +3]）。
3、再就是透明度为0的像素点设置为青色。
4、最后将canvas返回赋给平面对象
下面是对实现的过程详细说明。
首先使随机生成对应区域的温度值 和位置坐标

        //随机给出温度值  储存在2维数组
        let getTemperature=()=>{

            var  temperatureArray=new Array();
            for(let i=0;i<9;i++){
                temperatureArray[i]=new Array();
                for(let j=0;j<9;j++){
                    temperatureArray[i][j]=parseInt(Math.random()*35);
                }
            }
            return temperatureArray;
        }


        //获取温度点的XY坐标
        let getPositionXY=(i,j)=>{
            let positionX=[5,20,35,50,65,80,95,80,90];
            let positionY=[5,20,35,50,65,80,95,80,90];
            return {
                x:positionX[i],
                y:positionY[j]
            }
        }

上述代码比较简单就不做过多的说明，接下来介绍绘制辐射圆，即每一个位置下面对应一个辐射圆，根据温度的高低 温度越高它的辐射半径就大（即辐射圆大）

//绘制辐射圆
        let drawCircular=(context,opts)=>{
            let {x,y,radius,weight}=opts;

            radius=parseInt(radius*weight);//计算出实际的辐射圆

            // 创建圆设置填充色
            let rGradient = context.createRadialGradient(x, y, 0, x, y, radius);
            rGradient.addColorStop(0, "rgba(0, 1, 0, 1)");
            rGradient.addColorStop(1, "rgba(1, 0, 0, 0)")；
            context.fillStyle = rGradient;

            // 设置globalAlpha
            context.globalAlpha = weight;
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI);
            context.closePath();

            context.fill();// 填充

        }

接收到传来的上下文对象，位置坐标、半径、和温度的权重每一个辐射圆都是渐变的中间颜色深，周围颜色浅然后对其进行绘制。接下来就是完成调色板的代码，根据透明度对每一个像素点颜色采样。代码如下。

let createPalette=()=>{
            //颜色条的颜色分布
            let colorStops = {
                0: "#0ff",
                0.4: "#0f0",
                0.8: "#ff0",
                1: "#f00"
            };
            //颜色条的大小
            let width = 256, height = 1;
            // 创建canvas
            let paletteCanvas = document.createElement("canvas");
            paletteCanvas.width = width;
            paletteCanvas.height = height;
            let ctx = paletteCanvas.getContext("2d");

            // 创建线性渐变色
            let linearGradient = ctx.createLinearGradient(0, 0, width, 0);
            for (const key in colorStops) {
                linearGradient.addColorStop(key, colorStops[key]);
            }

            // 绘制渐变色条
            ctx.fillStyle = linearGradient;
            ctx.fillRect(0, 0, width, height);

            let imageData = ctx.getImageData(0, 0, width, height).data;// 读取像素值

            return {
                canvas: paletteCanvas,
                pickColor: function (position) {
                    return imageData.slice(position * 4, position * 4+3 )
                }
            }
        }

首先设置颜色的分布，0-1的范围内设置区间的颜色，创建canvas、线条对其进行绘制，然后获取其像素点的颜色值（width：256，height:1）储存再数组中，返回值第一个是将该调色板返回，第二是通过传过来的透明度a的值（即就是 在调色板的位置的值 ）然后截取出rgb颜色值进行返回用于对应像素着色。接下来将介绍最核心的方法绘制热力图的方法，就是对上面四个方法的使用，代码如下。

let heatMap=(width,height)=>{
            let canvas = document.createElement("canvas");
            canvas.width=width;
            canvas.height=height;
            let context = canvas.getContext("2d");
            let tenperature=getTemperature();

            for(let i=0;i<9;i++) {
                for (let j = 0; j < 9; j++) {
                    let weight=tenperature[i][j]/33;  //计算出当前温度占标准温度的权值
                    drawCircular(context,{
                        x:getPositionXY(i,j).x,
                        y:getPositionXY(i,j).y,
                        radius:20,
                        weight:weight
                    })
                }
            }
            let palette=createPalette();
            document.body.appendChild(palette.canvas);
            let imageData = context.getImageData(0, 0, width, height);
            let data=imageData.data;

            for (let i = 3; i < data.length; i += 4) {//根据画面数据绘制颜色
                let alpha = data[i];
                let color = palette.pickColor(alpha);
                data[i - 3] = color[0];
                data[i - 2] = color[1];
                data[i - 1] = color[2];
            }

            for(var i = 0; i < imageData.data.length; i += 4) {// 背景设置成青色
                if(imageData.data[i + 3] == 0) {
                    imageData.data[i] = 0;
                    imageData.data[i + 1] = 255;
                    imageData.data[i + 2] = 255;
                    imageData.data[i + 3] = 255;
                }
            }
            context.putImageData(imageData, 0, 0);//设置画面数据
            return canvas;
        }

首先创建canvas，和上下文对象，设置canvas的大小，循环调用绘制辐射圆的方法绘制辐射圆，然后获取到绘制辐射圆每一个像素点的rgba即（data）,接下来就是最重要的根据透明度通道a的值从调色板获取对应的颜色值，然后将透明度为0的像素点设置为青色，最后将canvas对象返回。接下来就非常简单了将获取到的canvas当作纹理图给mesh就完成了绘制。

		let heatMapGeo = new THREE.PlaneGeometry(100,100);
        let heatMapTexture = new THREE.Texture(heatMap(100,100));

        let heatMapMaterial = new THREE.MeshBasicMaterial({
            map: heatMapTexture
        });
        heatMapMaterial.map.needsUpdate = true;
        heatMapPlane = new THREE.Mesh(heatMapGeo,heatMapMaterial);
        heatMapPlane.position.set(0,0,0);
        heatMapPlane.rotation.copy(new THREE.Euler(-Math.PI/2,0, Math.PI));
        scene.add(heatMapPlane);

经过上面一系列的流程就完成通过Three.js实现热力图的绘制效果如下图所示。

最终把该效果制作成一个dome和大家一起学习进步，有什么错误欢迎大家提出改正意见。如需转发请标明原文连接，谢谢合作！3D的世界里山高水长，还得继续默默前行。

生活不只有诗和远方，还有面包和牛奶。