I've been trying to grasp the concept of quaternions for three.js, but have struggled to apply them in the specific way I need for my project. Here's my dilemma:
Imagine a sphere with its center at (0,0,0), and I want to position an object on the surface of the sphere as a focal point for the camera. This focal point should be able to move and rotate on the surface based on keyboard input. While setting it into orbit is straightforward, maintaining the correct rotation perpendicular to the surface has proven challenging. I understand that quaternions are essential for achieving smooth movement and arbitrary axis rotation, but I'm unsure how to begin.
The next challenge is rotating the camera offset along with the focal point. The code snippet I tried doesn't seem to produce the desired outcome, as the cameraOffset fails to inherit the rotation properly:
var cameraOffset = relativeCameraOffset.clone().applyMatrix4( focalPoint.matrixWorld );
camera.position.copy( focalPoint.position.clone().add(cameraOffset) );
camera.lookAt( focalPoint.position );
Update 1: I attempted fixing the camera on the pole and rotating the planet instead. However, this approach also encounters issues when moving towards the equator, where the directional orientation becomes skewed (i.e., left becomes forward). The updated code snippet is as follows:
acceleration.set(0,0,0);
if (keyboard.pressed("w")) acceleration.x = 1 * accelerationSpeed;
if (keyboard.pressed("s")) acceleration.x = -1 * accelerationSpeed;
if (keyboard.pressed("a")) acceleration.z = 1 * accelerationSpeed;
if (keyboard.pressed("d")) acceleration.z = -1 * accelerationSpeed;
if (keyboard.pressed("q")) acceleration.y = 1 * accelerationSpeed;
if (keyboard.pressed("e")) acceleration.y = -1 * accelerationSpeed;
velocity.add(acceleration);
velocity.multiplyScalar(dropOff);
velocity.max(minV);
velocity.min(maxV);
planet.mesh.rotation.x += velocity.x;
planet.mesh.rotation.y += velocity.y;
planet.mesh.rotation.z += velocity.z;
So I'm still searching for alternative solutions.