# How to rotate sphere based on mouse click using three js

I made Globe using sphere and added image on top of sphere using texture. my goal is to achieve, if i select a country suppose India, sphere has to be rotate so that India will be in center. For this i am doing i am taking the intersection point of sphere of India, and created the function for which will create latitude and longitude and return it, later i am passing this latitude and longitude to another function which will rotate accordingly, but the problem is it is not rotating properly. Please help. Below is my code snip.

``````function createLatAndLong(pointX, pointY, pointZ) {
var pointOnSphere = new THREE.Vector3();
pointOnSphere.x = pointX;
pointOnSphere.y = pointY;
pointOnSphere.z = pointZ;

var lat =
90 - (Math.acos(pointOnSphere.y / EarthRadius) * 180) / Math.PI;
var lon =
((90 +
(Math.atan2(pointOnSphere.x, pointOnSphere.z) * 180) / Math.PI) %
360) -
180;

let latAndLongObj = { latitude: lat, longitude: lon };

return latAndLongObj;
``````

}

This will create latitude points and longitude, based on intersection points.

``````function rotateGloab(lat,lon)
``````

{

``````var verticalOffset = 0.1;
earthmesh.rotation.x =lat * (Math.PI / 180) - verticalOffset ;
earthmesh.rotation.y = (270 - lon) * (Math.PI / 180) ;
``````

}

This function is do rotation of sphere.

Calculating latitude and longitude may be a bit of an overkill - especially when it starts involving manual trigonometry. Try the following:

1. Determine the clicked point position as Vector3.
2. Subtract the clicked position vector from globe centre vector (ie. globe.position.) Resulting vector is a direction from centre to the clicked position.
3. Calculate the angle offset between that vector and the camera forward vector - you can do this either with Quaternions, Eulers, or Vector3.angleTo.
4. Rotate or slerp the globe by the angle calculated in point 3.

Hi i need to create something like this.

But i can able to create globe, but how to rotate on selected country and highlight selected country.

Please i need a help, i am very new to three js.

Did you already manage to try what I wrote above ?