经纬志
首页 / three.js / 使用示例

分级色线

九百个点的环形轨迹,按分段速度从冷蓝渐变到暖橙。 颜色写在每段两端的顶点上,由材质插值,右下角给出同源色带。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

为什么用线段而不是线带

LineSegments 每两个顶点构成一段,互不相连。 这样每段可以带独立的两个顶点色,段与段之间不会互相插值污染。 如果用 Line 把所有点串起来,颜色会在整条线上连续插值, 速度突变的地方会出现拖尾。

代价是顶点数翻倍:九百个点对应八百九十九段,一千七百九十八个顶点。 对线条来说这点内存可以忽略,换来的是精确的分段着色。

数据规模形态
轨迹点900环形,半径带正弦扰动
线段899每段两端独立取色
顶点缓冲1798 × 3position 与 color 等长
色带3 段蓝 → 青 → 橙,中点为过渡

速度从哪来

示例里的「速度」由相邻点距离乘一个周期扰动得到,模拟轨迹在直道加速、弯道减速。 真实 GPS 轨迹通常直接带时间戳,两点距离除以时间差就是速度, 再按分位数归一化,避免个别跳点把色带拉偏。

归一化用了最大值而不是分位数,因此极值段的颜色一定落在色带端点上, 这也是示例里橙色只出现在少数几处的原因。

线宽限制依然存在。这里用的是原生 LineSegments, 线宽固定一像素。需要粗线时把每段做成带 LineMaterial 的 Line2,或者干脆用 TubeGeometry 换成管状体。