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

Question

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

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

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

代码根据this example获取球体位置：

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

球形：

图片包装：

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