How to rotate sphere based on mouse click using three js

Questions
1

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 EarthRadius = 20;
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.

Please help me, i am new to three js.

2

Calculating latitude and longitude may be a bit of an overkill - especially when it starts involving manual trigonometry. :sweat_smile: 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.
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.

4

Did you already manage to try what I wrote above :face_with_raised_eyebrow: ?