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

球:

图片包装:

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