Three.js地球模型点击时如何获取对应纹理的正确像素坐标

1. 判断点击命中的6面纹理 #

• Three.js中BoxGeometry的6个面默认绑定的材质索引是固定的，和你传入的materialArray顺序完全对应：intersects[0].face.materialIndex返回值为0~5，分别对应右、左、上、下、前、后6个面的材质，直接通过该值即可判断当前点击的是哪张纹理。

2. y坐标偏差问题修复 #

问题原因 #

你出现y坐标偏差的核心原因是纹理坐标重复反转：
Three.js加载纹理时默认开启Texture.flipY = true，会自动将纹理的Y轴原点从左下角翻转到和图片一致的左上角，你代码中额外做了textureHeight - 计算值的操作，等于把Y轴又反转了一次，最终得到的y值是完全颠倒的。你实际拿到的219刚好符合「纹理总高度 - 预期值366」的计算结果，和这个问题完全匹配。

修复方案 #

二选一即可：

• 方案1：所有纹理加载完成后设置texture.flipY = false，保持现有y坐标计算逻辑不变
• 方案2：直接修改y坐标计算逻辑，去掉多余的反转操作，把y的计算代码改为：

y: Math.round(intersects[0].uv.y * textureHeight)

内容的提问来源于stack exchange，提问作者Ismail