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

目前：我有一个带有纹理的球体，它绕 y 轴旋转。我还有在 3D 空间中单击的位置，以及球体上的旋转位置（我认为）。

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

在实践中，我不会使用此图像，但我觉得这将是一个很好的起点。

代码用于根据以下内容获取球体上的位置这个例子 https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes.html:

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);
    }
}

Sphere:

Image Wrapping it:

事实上，你不需要计算任何东西。intersects[0].uv为您提供 UV 坐标。

Texture coordinates range always from 0.0 to 1.0. They are unitless. So same texture with another resolution will fit as well.

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

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