indem.html (18.7 KB)
I am strugglling with the earth rotating on click part
Right now it is working fine but due to the camera offset it is taking the earth near or far from the camera
function selectLocation(lat, lon) {
removeBeforeRotate();
const [targetX, targetY, targetZ] = latLonToXYZ(lat, lon); // Convert lat/lon to 3D coordinates
const targetRotationY = Math.atan2(targetZ, targetX); // Rotation for globe
let cameraYOffset;
const radius = 10;
if (lat > 60) {
cameraYOffset = 18;
} else if (lat > 45) {
cameraYOffset = 4.5;
} else if (lat > 30) {
cameraYOffset = 2.5;
} else if (lat > 15) {
cameraYOffset = 0.4;
} else if (lat > 0) {
cameraYOffset = -1.5;
} else if (lat > -15) {
cameraYOffset = -1.2;
} else if (lat > -30) {
cameraYOffset = -2.;
} else if (lat > -45) {
cameraYOffset = -3;
} else {
cameraYOffset = -9;
}
const fixedCameraZ = 10;
new TWEEN.Tween({
rotationY: earthGroup.rotation.y,
cameraY: camera.position.y
})
.to({
rotationY: targetRotationY - Math.PI / 2,
cameraY: targetY + cameraYOffset
}, 2000)
.easing(TWEEN.Easing.Quadratic.InOut)
.onUpdate(function (object) {
earthGroup.rotation.y = object.rotationY;
camera.position.y = object.cameraY;
camera.position.z = fixedCameraZ;
camera.lookAt(earthGroup.position);
})
.onComplete(function () {
stopGlobeRotation();
addAfterRotate();
})
.start();
}
have used different offset so that every point should come in on same part of the screen
(i have attached the full code as html above)
It would be awesome if someone could show me the right logic