首页 / three.js / 使用示例
高程着色网格
地形网格按海拔逐顶点上色，右侧是同步绘制的色带图例。 平滑渐变与六至十二级分层设色可以随时切换，这是专题制图里最常见的两种表达。
源码与运行效果
颜色写在哪
每个顶点三个浮点数，长度与顶点数相同，挂到 geometry.setAttribute('color', ...)。
材质必须开 vertexColors: true，否则这份数据会被忽略。
颜色值是线性空间，因此用 new THREE.Color('#12324f') 构造，
十六进制字符串会自动按 sRGB 解释并转换。
分层设色只是把归一化高程先量化：Math.floor(t * n) / (n - 1)，
这样相邻两条色带之间没有过渡，界限清晰。
真实制图里分级的断点往往不是等距的，按等值线区间给高程表更合适。
| 环节 | 做法 | 代价 |
|---|---|---|
| 改色带级数 | 重写 color 属性 | 约一万六千顶点，毫秒级 |
| 切平滑 / 分层 | 同一函数换量化方式 | 同上 |
| 图例 | canvas 2D 直接绘制 | 与三维画面同源，不会脱节 |
为什么不改材质颜色
material.color 是全局统一色，改它只能整体染色。
要按高程分区着色，颜色信息必须逐顶点带进 GPU，或者做成贴图由片元采样。
顶点数远小于像素数，逐顶点方案的缓冲更小，也更容易在业务代码里按要素筛选重算。
分带数量与顶点密度要匹配。网格只有 128 段时，一条色带的宽度可能不到两个三角形， 边界会出现锯齿。这种时候把颜色搬到片元里按高程插值，或者先把网格加密， 比单纯提高色带数更有效。