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

贴图坐标拾取

地面是一张八乘八的地块贴图,由 canvas 现场绘制。点击任意位置, 能同时拿到 UV、贴图像素坐标与地块编号,并在落点立一根标记杆。

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

UV 与像素的两个翻转

交点自带 uv,范围是 0 到 1。乘以贴图边长得到像素坐标, 但 canvas 的 Y 轴向下,纹理的 V 轴向上,所以 v 要取 1 - v 再乘。漏掉这一步,取到的永远是上下镜像的那一格。

示例贴图是 512 乘 512、八乘八格,每格边长 64 像素。 像素坐标除以格边长取整,就得到行列号,再查数组拿到地块编号。 这套换算与浏览器里常见的 canvas 点击取色完全一致。

量范围换算
UV0 – 1由求交直接给出
像素0 – 511UV 乘边长并取整
网格行列0 – 7像素除以 64
地块编号0 – 63行乘 8 加列

为什么贴图要画编号

拾取结果在三维空间里只有坐标,肉眼很难确认取的是不是目标地块。 把编号直接画进贴图,读数与画面就能对上,调试成本大幅降低。 生产环境的底图不会这么画,但运维入口常常挂一张带网格编号的辅助图层。

贴图拾取不受缩放影响。UV 是模型空间的属性, 相机拉远拉近都不会改变。因此这套换算适合做「按图幅取要素」, 像素坐标可以直接回传给后端,去查同一个瓦片里的数据。