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

Canvas 纹理

一张 512 见方的地块底图在浏览器里画出来:四乘四格、道路十字、建筑基底。 它被平铺到整片地面,平铺次数从一到八可调,配色也能重新随机。

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

平铺的接缝问题

用 RepeatWrapping 平铺时,左右边缘的图案必须能接上, 否则地面会出现规则的网格状接缝。示例把道路与虚线画到画布边界之外, 平铺后路口自然连通。

这个问题在底图瓦片里同样存在。矢量和栅格底图都要保证相邻瓦片的边缘要素连续, 否则放大到拼接处会看到断掉的马路。

项取值说明
画布512 × 5124 × 4 地块,每格 128
平铺1 – 8由 texture.repeat 控制
各向异性取显卡上限斜视时纹理不糊
色彩空间sRGB颜色贴图的正确设置

重新生成只改一次标记

换配色时重新在 canvas 上绘制,然后把 texture.needsUpdate 置为真, 下一帧就会重新上传。不需要新建纹理对象,也不必重新设置材质的贴图字段。

这条路径适合少量动态贴图:热力图、实时状态板、编辑中的图例。 每帧重画整张 512 见方的贴图会很贵,高频更新要用离屏画布或直接写着色器。

纹理尺寸尽量取 2 的幂。512、1024 这类尺寸在各平台都能生成完整的 mipmap, 缩小时不会闪烁。非 2 的幂在 WebGL2 下可用,但某些压缩与过滤路径会受限。