首页 / three.js / 使用示例
贴图坐标拾取
地面是一张八乘八的地块贴图,由 canvas 现场绘制。点击任意位置, 能同时拿到 UV、贴图像素坐标与地块编号,并在落点立一根标记杆。
源码与运行效果
UV 与像素的两个翻转
交点自带 uv,范围是 0 到 1。乘以贴图边长得到像素坐标,
但 canvas 的 Y 轴向下,纹理的 V 轴向上,所以 v 要取
1 - v 再乘。漏掉这一步,取到的永远是上下镜像的那一格。
示例贴图是 512 乘 512、八乘八格,每格边长 64 像素。 像素坐标除以格边长取整,就得到行列号,再查数组拿到地块编号。 这套换算与浏览器里常见的 canvas 点击取色完全一致。
| 量 | 范围 | 换算 |
|---|---|---|
| UV | 0 – 1 | 由求交直接给出 |
| 像素 | 0 – 511 | UV 乘边长并取整 |
| 网格行列 | 0 – 7 | 像素除以 64 |
| 地块编号 | 0 – 63 | 行乘 8 加列 |
为什么贴图要画编号
拾取结果在三维空间里只有坐标,肉眼很难确认取的是不是目标地块。 把编号直接画进贴图,读数与画面就能对上,调试成本大幅降低。 生产环境的底图不会这么画,但运维入口常常挂一张带网格编号的辅助图层。
贴图拾取不受缩放影响。UV 是模型空间的属性, 相机拉远拉近都不会改变。因此这套换算适合做「按图幅取要素」, 像素坐标可以直接回传给后端,去查同一个瓦片里的数据。