Hello community, first time posting here.
I have a little issue i can rotate my planet with drag and its working, have some markers on it and when clicking it centers the camera and rotates the planet, so the marker is in the center, it works but the issue is depending on the marker when i drag the planet again it suddenly jumps and the rotation is messed up, the planet is upside down, dont know why its happening
so this is the code i use for drag, move it
```
const onPointerDown = (e) => {
isDragging.current = true;
startX.current = e.clientX || e.touches[0].clientX;
startY.current = e.clientY || e.touches[0].clientY;
startRotationX.current = earth_mesh_ref.current.rotation.x;
startRotationY.current = earth_mesh_ref.current.rotation.y;
};
const onPointerMove = (e) => {
if (!isDragging.current) return;
if (animating.current) return;
const x = e.clientX || e.touches[0].clientX;
const y = e.clientY || e.touches[0].clientY;
const deltaX = x - startX.current;
const deltaY = y - startY.current;
earth_mesh_ref.current.rotation.y = startRotationY.current + deltaX * 0.005;
earth_mesh_ref.current.rotation.x = startRotationX.current + deltaY * 0.005;
earth_mesh_ref.current.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, earth_mesh_ref.current.rotation.x));
};
```
and this is the code that i use to center the marker in camera
const zoomIn = (marker) => {
// in case user click another point when one was already clicked
if (isDragging.current) return;
isDragging.current = true;
animating.current = true;
const target = new THREE.Vector3();
marker.getWorldPosition(target);
// current marker in front of camera
const targetDir = target.clone().normalize();
// marker to go
const desiredDir = new THREE.Vector3(0, 0, 1);
// rotation
const deltaQuat = new THREE.Quaternion()
.setFromUnitVectors(targetDir, desiredDir);
const finalQuat = earth_mesh_ref.current.quaternion.clone()
.premultiply(deltaQuat);
gsap.to(earth_mesh_ref.current.quaternion, {
x: finalQuat.x,
y: finalQuat.y,
z: finalQuat.z,
w: finalQuat.w,
delay: 2,
duration: 1.5,
ease: "power3.inOut",
onUpdate: () => {
earth_mesh_ref.current.quaternion.normalize();
},
onComplete: () => {
// back to eauler
const euler = new THREE.Euler().setFromQuaternion(
earth_mesh_ref.current.quaternion, 'YX'
);
startRotationX.current = euler.x;
startRotationY.current = euler.y;
isDragging.current = false;
animating.current = false;
prev_quaternion.current = true;
}
});
target_z.current = 1.5;
}