首页 / three.js / 使用示例
置换地形
一块二百六十段见方的平面,颜色与高度全部来自两张贴图。 两张图都是代码画出来的:一张存高度,一张存带等高线的配色。
源码与运行效果
顶点没有真的变
置换发生在顶点着色器里,CPU 侧的 position 数组仍是平的。
这意味着射线拾取、包围盒、物理碰撞都按平面计算,
与看到的起伏对不上。
需要拾取时,要么在 CPU 侧用同一张高度图重建高度, 要么把置换逻辑同时写进拾取用的高程函数。示例的浮标、树根都用函数落位, 正是为了避开这个错位。
| 项 | 取值 | 说明 |
|---|---|---|
| 网格 | 260 × 260 | 约十三万五千个顶点 |
| 置换贴图 | 256 × 256 | 灰度图,取 R 通道 |
displacementScale | 0 – 12 | 起幅,实时可调 |
| 色彩空间 | 贴图用线性 | 颜色贴图才设 sRGB |
分辨率决定起伏的清晰度
置换贴图只有 256 见方,网格却有 260 段,两者数量级相当。 如果把贴图降到 32 见方,而网格保持密集,起伏会变成一块块斜面, 因为每个顶点取到的高度是双线性插值出来的。
置换贴图不要设 sRGB。高度是数据不是颜色,按 sRGB 解码会让中段高度整体偏移, 地形看起来像被压扁。只有颜色贴图才需要 sRGB 标记。