threejs 热力图做成材质_Threejs 高度热力图

Author--------------- Yen

热力图是比较常见的一个应用场景，很多关于人流密度，受力应力云图，还有污染物的扩散图。如果是依照heatmapjs库的方式生成一个canvas做为纹理，贴在PlaneBufferGeometry上，但是这样是平面的，如果想要根据热力图数据的大小来生成一个带有高度的，好像没找到现成的，就自己写一个吧。效果如下：

实现比较核心的思路是：

1、根据灰度图中rgb某一个通道的值来在vertex shader中调整具体高度，其实也可以根据彩色图中的rgb值通过置灰的算法换算成对应高度，也行。

2、由于vertex shader是一个逐顶点计算，所以在生成PlaneBufferGeometry的时候要考虑多生成几份顶点。

具体实现核心代码如下：

自定义材质ShaderMaterial

// 自定义材质 var material = new THREE.ShaderMaterial({

// 用于给着色器中的uniform变量传值 uniforms: THREE.UniformsUtils.merge([

THREE.UniformsLib.common,

THREE.UniformsLib.specularmap,

THREE.UniformsLib.envmap,

THREE.UniformsLib.aomap,

THREE.UniformsLib.lightmap,

THREE.UniformsLib.emissivemap,

THREE.UniformsLib.bumpmap,

THR