首页 / three.js / 使用示例
分级色线
九百个点的环形轨迹,按分段速度从冷蓝渐变到暖橙。 颜色写在每段两端的顶点上,由材质插值,右下角给出同源色带。
源码与运行效果
为什么用线段而不是线带
LineSegments 每两个顶点构成一段,互不相连。
这样每段可以带独立的两个顶点色,段与段之间不会互相插值污染。
如果用 Line 把所有点串起来,颜色会在整条线上连续插值,
速度突变的地方会出现拖尾。
代价是顶点数翻倍:九百个点对应八百九十九段,一千七百九十八个顶点。 对线条来说这点内存可以忽略,换来的是精确的分段着色。
| 数据 | 规模 | 形态 |
|---|---|---|
| 轨迹点 | 900 | 环形,半径带正弦扰动 |
| 线段 | 899 | 每段两端独立取色 |
| 顶点缓冲 | 1798 × 3 | position 与 color 等长 |
| 色带 | 3 段 | 蓝 → 青 → 橙,中点为过渡 |
速度从哪来
示例里的「速度」由相邻点距离乘一个周期扰动得到,模拟轨迹在直道加速、弯道减速。 真实 GPS 轨迹通常直接带时间戳,两点距离除以时间差就是速度, 再按分位数归一化,避免个别跳点把色带拉偏。
归一化用了最大值而不是分位数,因此极值段的颜色一定落在色带端点上, 这也是示例里橙色只出现在少数几处的原因。
线宽限制依然存在。这里用的是原生 LineSegments,
线宽固定一像素。需要粗线时把每段做成带 LineMaterial 的
Line2,或者干脆用 TubeGeometry 换成管状体。