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

Goal: Get the position on the texture, for example: I want to get what square of the image I click on. (See Example Sphere and image below)

In practice, I won't be using this image but I felt it would be a good starting point.

Code For getting position on the 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);
    }
}

Sphere:

Image Wrapping it:

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

Goal: Get the position on the texture, for example: I want to get what square of the image I click on. (See Example Sphere and image below)

In practice, I won't be using this image but I felt it would be a good starting point.

Code For getting position on the 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);
    }
}

Sphere:

Image Wrapping it:

• javascript
• math
• 3d
• three.js

• hint: can you get the UV coords of the point you clicked on the sphere? – gaitat Commented Jan 28, 2016 at 22:11
• Im not really sure what UV is, I know it has to do with textures (UV Map), I'll look into it. Thanks! – Chris Commented Jan 28, 2016 at 22:17
• Quick question, Im looking at the wiki link for UV Mapping en.wikipedia/wiki/UV_mapping and it mentions For any point P on the sphere, calculate \hat d, that being the unit vector from P to the sphere's origin. If the sphere is centered at 0,0 - Does that mean P == D ? – Chris Commented Jan 28, 2016 at 22:29

1 Answer 1

Actually, you don't need to calculate anything. intersects[0].uv gives you the the UV coordinates.

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

So, if you need to know the pixel position of your click, do:

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