使用ThreeJS获取球体纹理上的点击位置

Question

目前：我有一个带有纹理的球体，它围绕y轴旋转。我还有被单击的3D空间中的位置，以及球体上旋转后的位置（我想是这样）。

目标：获取纹理上的位置，例如：我想知道我点击了图像的哪个方块。（请参见下面的示例球体和图像）

---

实际应用中，我不会使用这张图片，但我觉得它是一个很好的起点。

获取球体上位置的代码基于此示例：

function onDocumentMouseDown( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( objects );
    if ( intersects.length > 0 ) {
        console.log(intersects[ 0 ].point);
        var vector = new THREE.Vector3( 1, 0, 0 );

        var axis = new THREE.Vector3( 0, 1, 0 );
        var angle = objects[ 0 ].rotation.y;

        //Rotate Point
        intersects[ 0 ].point = vector.applyAxisAngle( axis, angle );

        console.log(intersects[ 0 ].point);
    }
}

球体：

图像包裹：

- Chris

---

提示：您能获取单击球体上的点的UV坐标吗？ - gaitat

我不太确定UV是什么，我知道它与纹理有关（UV映射），我会去了解一下。谢谢！ - Chris

快速问题，我正在查看UV映射的维基链接https://en.wikipedia.org/wiki/UV_mapping，它提到“对于球面上的任意点P，计算\hat d，即从P到球体原点的单位向量。”如果球体位于0,0中心，这是否意味着“P == D”？ - Chris

Answer 1

实际上，您不需要进行任何计算。 intersects[0].uv 可以为您提供 UV 坐标。

纹理坐标始终从 0.0 到 1.0 范围内。它们是无单位的。因此，与具有不同分辨率的另一个纹理也将适合。

因此，如果您需要知道单击的像素位置，请执行以下操作：

var pixelX = Math.round(intersects[0].uv.x * textureWidth);
var pixelY = Math.round(intersects[0].uv.y * textureHeight);

- Brakebein

---

非常感谢！很抱歉让您等了这么久，但这正是我所需要的。 - Chris