上节完成了人口分布柱状图的基本效果：
这节我们来完善一下。
现在的柱子颜色都一样，直观看不出高度的差别，我们用渐变色来改一下：
之前做过类似的：
这里我们不用分那么多颜色，两种就行。
渐变色的实现方式之前讲过，就是用 z 除以一个数值，根据百分比来做颜色插值。
比如 color1 是黄色，color2 是红色，根据插值的百分比来计算具体是什么颜色。
这里我们从红色到红色过渡，到达 100 就是红色，不到 100 根据比值来做颜色插值。
材质要开启 vertextColors 使用顶点颜色。
const positions = geometry.attributes.position;
const colorsArr = [];
const color1 = new THREE.Color('yellow');
const color2 = new THREE.Color('red');
for (let i = 0; i < positions.count; i++) {
const z = positions.getZ(i) * 2
const percent = z / 100;
const c = color1.clone().lerp(color2, percent);
colorsArr.push(c.r, c.g, c.b);
}
const colors = new Float32Array(colorsArr);
geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
const material = new THREE.MeshPhongMaterial({
// color: 'orange'
vertexColors: true
});这里 positions.getZ 拿到的是一半的高度，就是没做位移之前的 z，所以要乘以 2
试下效果：
可以直观看出来，山东、广东的人口最多，红色部分最多。
柱子高度有点低，我们改为除以 50：
改成粉到红过渡，最高值大概是 230 多，我们除以 250 计算颜色插值：
看下效果：
这样从颜色就可以直观看出每个省人口多少了。
现在省的颜色和高度都是一样的，太单调了，我们加一点随机值：
随机颜色也可以用 lerp 颜色插值来做：
淡蓝色和蓝色之间随机百分比生成插值颜色。
const color1 = new THREE.Color('lightblue');
const color2 = new THREE.Color('blue');
const percent = Math.random();
const color = color1.clone().lerp(color2, percent);
这是个小技巧：用 Math.random 配合 color.lerp 颜色插值可以生成两个颜色之间的随机颜色
现在转的时候地图会翻转：
其实我们不是想让它这样转。
旋转下：
chinaMap.rotateX(-Math.PI / 2);调一下相机位置
camera.position.set(0, 500, 200);
这样旋转体验就对了。
对比下之前那个：
好看很多了。
案例代码上传了小册仓库
总结
这节我们美化了一下地图。
首先用颜色插值，配合 高度 / 最大高度 的比值计算出每个顶点的颜色，实现了与高度有关的渐变色。
这样柱子可以直观看出来哪个更高。
然后用颜色插值给每个省加上了随机的颜色，这个 Math.random 配合 color.lerp 生成两个颜色之间的随机颜色的技巧很常用。
地图美化完之后，下节继续来加功能。