首页 / three.js / 使用示例
Canvas 纹理
一张 512 见方的地块底图在浏览器里画出来:四乘四格、道路十字、建筑基底。 它被平铺到整片地面,平铺次数从一到八可调,配色也能重新随机。
源码与运行效果
平铺的接缝问题
用 RepeatWrapping 平铺时,左右边缘的图案必须能接上,
否则地面会出现规则的网格状接缝。示例把道路与虚线画到画布边界之外,
平铺后路口自然连通。
这个问题在底图瓦片里同样存在。矢量和栅格底图都要保证相邻瓦片的边缘要素连续, 否则放大到拼接处会看到断掉的马路。
| 项 | 取值 | 说明 |
|---|---|---|
| 画布 | 512 × 512 | 4 × 4 地块,每格 128 |
| 平铺 | 1 – 8 | 由 texture.repeat 控制 |
| 各向异性 | 取显卡上限 | 斜视时纹理不糊 |
| 色彩空间 | sRGB | 颜色贴图的正确设置 |
重新生成只改一次标记
换配色时重新在 canvas 上绘制,然后把 texture.needsUpdate 置为真,
下一帧就会重新上传。不需要新建纹理对象,也不必重新设置材质的贴图字段。
这条路径适合少量动态贴图:热力图、实时状态板、编辑中的图例。 每帧重画整张 512 见方的贴图会很贵,高频更新要用离屏画布或直接写着色器。
纹理尺寸尽量取 2 的幂。512、1024 这类尺寸在各平台都能生成完整的 mipmap, 缩小时不会闪烁。非 2 的幂在 WebGL2 下可用,但某些压缩与过滤路径会受限。