Getting a click position on a sphere texture using three-layer

Currently: I have a sphere with a texture on it that rotates around the y axis. I also have a position that was pressed in 3D space, as well as a rotated position on the sphere (I think).

Purpose: to get a position on the texture, for example: I want to get the square of the image that I click on. (See Example Spheres and image below)


In practice, I will not use this image, but I felt that it would be a good starting point.

Code To obtain a position in a sphere based on 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);
    }
}

Scope:

Sphere

Image Capture: Image wrapper

+4
source share
1 answer

. intersects[0].uv UV-.

0.0 1.0. . . UV coordinates

, , :

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

Source: https://habr.com/ru/post/1626448/


All Articles