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

置换地形

一块二百六十段见方的平面,颜色与高度全部来自两张贴图。 两张图都是代码画出来的:一张存高度,一张存带等高线的配色。

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

顶点没有真的变

置换发生在顶点着色器里,CPU 侧的 position 数组仍是平的。 这意味着射线拾取、包围盒、物理碰撞都按平面计算, 与看到的起伏对不上。

需要拾取时,要么在 CPU 侧用同一张高度图重建高度, 要么把置换逻辑同时写进拾取用的高程函数。示例的浮标、树根都用函数落位, 正是为了避开这个错位。

项取值说明
网格260 × 260约十三万五千个顶点
置换贴图256 × 256灰度图,取 R 通道
displacementScale0 – 12起幅,实时可调
色彩空间贴图用线性颜色贴图才设 sRGB

分辨率决定起伏的清晰度

置换贴图只有 256 见方,网格却有 260 段,两者数量级相当。 如果把贴图降到 32 见方,而网格保持密集,起伏会变成一块块斜面, 因为每个顶点取到的高度是双线性插值出来的。

置换贴图不要设 sRGB。高度是数据不是颜色,按 sRGB 解码会让中段高度整体偏移, 地形看起来像被压扁。只有颜色贴图才需要 sRGB 标记。