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

纹理贴图

用 Canvas 画一张带方格网、等比线与注记的示意图,贴到地面平面上。 滑杆调整重复倍数,按钮切换包裹方式与配色。

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

说明

贴图不是外部图片,而是运行时在 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 里看到的颜色对不上。