纹理贴图
用 Canvas 画一张带方格网、等比线与注记的示意图,贴到地面平面上。 滑杆调整重复倍数,按钮切换包裹方式与配色。
说明
贴图不是外部图片,而是运行时在 512 × 512 的 Canvas 上画出来的:底色、方格网、 两条贝塞尔曲线、比例尺与方向标。换成真实数据时,把 Canvas 绘制换成切片绘制, 其余流程完全一样。
CanvasTexture 创建后,wrapS 与 wrapT 设为
RepeatWrapping,repeat 控制平铺倍数。
切换到夹边模式后,超出 0–1 的 UV 会复制边缘像素,而不是继续平铺。
| 设置 | 取值 | 说明 |
|---|---|---|
| 纹理尺寸 | 512 × 512 | 平面 9 × 9,重复 2 次时每个纹理块约 4.5 单位 |
| 包裹 | Repeat / Clamp | 按钮切换,观察平面边缘的差别 |
| 重复倍数 | 1 – 5 | 整数步进,倍数越大注记越密 |
| 各向异性 | 硬件上限 | 斜视地面时保持线状要素清晰 |
| 色彩空间 | sRGB | 这是颜色贴图,不是数据贴图 |
| 平面朝向 | 绕 X 轴 −90° | 放倒成地面,UV 不受影响 |
重复与包裹是两件事
repeat 只改变 UV 的缩放,决定纹理在面上出现几次;
wrapS 与 wrapT 决定 UV 超出范围时怎么取像素。
只调 repeat 而保持夹边,超出部分会被拉成边缘色带,
看起来像贴图「糊了」,其实是采样方式不对。
注意 repeat 变大后,同一张 512 像素的纹理被铺得更密,
每个纹理块占的屏幕像素变少,细节会变糊。这种情况下应当提高纹理分辨率,
或改用瓦片服务按层级请求。
重绘纹理
换配色时,重新在同一个 Canvas 上绘制,然后置
texture.needsUpdate = true。GPU 侧会重新上传整张图。
如果每帧都这样重绘,开销会很大;静态示意图只在配色变化时重绘一次,代价可以忽略。
频繁更新的动态纹理更适合用 DataTexture,直接写入类型化数组,
配合局部的 texture.needsUpdate,避免 Canvas 绘制与读回。
贴图与地理要素
把整张专题图烘成一张大纹理,只适合固定的示意场景。真实地图需要随缩放换细节, 靠单张纹理无法做到。常见做法是按层级切成瓦片,在 three 里按视距切换; 或者把矢量要素直接画成几何体,纹理只承担地表底色。
颜色贴图必须标 sRGB。不设置 colorSpace 时,
纹理会按线性解释,画面会明显偏亮或偏灰,与 Canvas 里看到的颜色对不上。