最近一个需求中，使用 BufferGeometry 进行热力图的绘制，踩了点小坑，简单记录一下啊。
原理
通过手动构造三角面、通过顶点上色的方式进行渲染，踩坑如下
- 当你使用顶点索引的方式复用顶点，但又想通过顶点进行上色时（复用的点颜色不一样），即使你设置了同样顶点索引数量的颜色值，但结果依旧是不符合预期的，这时候不能使用顶点索引
- 在 three.js 中颜色的 rgb 表示范围是 0-1，而不是 0-255，超过 1 会统统处理成白色，你可以每 3 位一组设置 r/g/b，也可以每 4 位一组，设置 r/g/b/a
- 手动构造三角面时，顶点的顺序很重要，推荐使用右手法则（逆时针）的方式进行构造，否则会导致自动计算的法向量向里，从而渲染不对，除非设置 side 为 DoubleSide
扩展
由于粗心犯错，于是重看了一遍 Color 对象。Geometry 顶点上色中如果两点颜色不同，则会进行线性插值。有时候我们需要手动进行线性插值，这时候 Color 对象其实已经有方法了，这里把常用的 api 罗列一下吧
- 构造函数重载，支持多种方式进行对象创建
- r/g/b 在 0 到 1 之间，默认值为 1
- add(color) 将自身颜色的 RGB 值与参数进行相加
- addColors(color1, color2) 将颜色的 RGB 值设置为 color1 和 color2 的和
- equals(color) 是否相同判断
- fromArray(array, offset) 通过格式为 [r,g,b] 的数组进行创建
- getHex() 得到颜色的十六进制值
- getHexString() 得到颜色的十六进制值作为字符串返回
- getHSL() 将 RGB 格式转换为 HSL 格式
- getStyle() 以 CSS 样式字符串形式返回该颜色值
- lerp(color, alpha) 将该颜色的RGB值线性插值到传入参数的RGB值。alpha参数可以被认为是两种颜色之间的比例值，其中0是当前颜色和1.0是第一个参数的颜色
- lerpColors(color1, color2, alpha) 将该颜色设置为线性插值颜色 color1 和 color2
- multiply(color) 对应 RGB 位值相乘
- multiplyScalar(s) 对应 RGB 位值乘统一的标量
- set/setHex/setHSL/setRGB/setScalar/setStyle/setColorName
- sub(color) 从该颜色的RGB分量中减去传入颜色的RGB分量。如果分量结果是负，则该分量为零
MathUtils 中也有类似 api
- clamp(value, min, max) 限制 value 处于 min 和 max 之间
- lerp(x, y, t) 线性插值
- mapLinear(x, a1, a2, b1, b2) x 从范围 [a1, a2] 到 [b1, b2] 的映射
- ……