Camera Movement for Earth Model in Three.js

Your latitude/longitude to 3D coordinates conversion function looks correct. For smooth camera transitions to specific Earth locations, I can provide some guidance on the interpolation options.

Camera Positioning

To position your camera to look at a specific lat/lon point:

JAVASCRIPTCopied
function moveCameraToLocation(lat, lon, radius, cameraDistance) {
  // Get the 3D position of the target point
  const targetPosition = latLonToXYZ(lat, lon, radius);
  
  // Position the camera at a distance from the target point
  const cameraPosition = latLonToXYZ(lat, lon, radius + cameraDistance);
  
  // Update camera position
  camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
  
  // Point the camera at the target (or at the center of the Earth if you prefer)
  camera.lookAt(targetPosition.x, targetPosition.y, targetPosition.z);
  // Or: camera.lookAt(0, 0, 0);
}

Smooth Transitions

For smooth transitions, you have several options:

1. Using Three.js's Built-in Interpolants

Three.js provides several interpolation classes that could be useful:

JAVASCRIPTCopied
function animateCameraMove(startLat, startLon, endLat, endLon, duration) {
  const startTime = performance.now();
  const endTime = startTime + duration;
  
  // Create interpolants for latitude and longitude
  const times = [0, 1];
  const latValues = [startLat, endLat];
  const lonValues = [startLon, endLon];
  
  const latInterpolant = new THREE.LinearInterpolant(
    new Float32Array(times),
    new Float32Array(latValues),
    1,
    new Float32Array(1)
  );
  
  const lonInterpolant = new THREE.LinearInterpolant(
    new Float32Array(times),
    new Float32Array(lonValues),
    1,
    new Float32Array(1)
  );
  
  function animate() {
    const now = performance.now();
    const t = Math.min((now - startTime) / duration, 1);
    
    const currentLat = latInterpolant.evaluate(t)[0];
    const currentLon = lonInterpolant.evaluate(t)[0];
    
    moveCameraToLocation(currentLat, currentLon, earthRadius, cameraDistance);
    
    if (t < 1) {
      requestAnimationFrame(animate);
    }
  }
  
  animate();
}

2. Using Spherical Interpolation

For camera movement along a spherical path (which is more natural for Earth):

JAVASCRIPTCopied
function animateCameraSpherical(startLat, startLon, endLat, endLon, duration) {
  const startTime = performance.now();
  const endTime = startTime + duration;
  
  // Convert start and end positions to spherical coordinates
  const startPos = latLonToXYZ(startLat, startLon, earthRadius + cameraDistance);
  const endPos = latLonToXYZ(endLat, endLon, earthRadius + cameraDistance);
  
  // Create start and end quaternions
  const startQuaternion = new THREE.Quaternion().setFromUnitVectors(
    new THREE.Vector3(0, 0, 1),
    new THREE.Vector3(startPos.x, startPos.y, startPos.z).normalize()
  );
  
  const endQuaternion = new THREE.Quaternion().setFromUnitVectors(
    new THREE.Vector3(0, 0, 1),
    new THREE.Vector3(endPos.x, endPos.y, endPos.z).normalize()
  );
  
  function animate() {
    const now = performance.now();
    const t = Math.min((now - startTime) / duration, 1);
    
    // Use THREE.QuaternionLinearInterpolant or slerp directly
    const currentQuat = new THREE.Quaternion();
    THREE.Quaternion.slerp(startQuaternion, endQuaternion, currentQuat, t);
    
    // Apply the quaternion to get the current camera position
    const currentPos = new THREE.Vector3(0, 0, earthRadius + cameraDistance)
      .applyQuaternion(currentQuat);
    
    camera.position.copy(currentPos);
    camera.lookAt(0, 0, 0);
    
    if (t < 1) {
      requestAnimationFrame(animate);
    }
  }
  
  animate();
}

Recommendations

1. Path Type: A spherical path (following the curvature of the Earth) is more natural for Earth visualization than a straight line.

2. Interpolation Library:

   • For simple transitions, Three.js's built-in interpolants are sufficient
   • For more complex animations, GSAP offers more control and easing functions
   • For purely spherical movement, QuaternionLinearInterpolant is ideal

3. Camera Orientation: Consider using OrbitControls to allow users to adjust the view after the automatic transition.

4. Performance: For complex scenes, ensure you're using efficient rendering techniques to maintain smooth animations.

This approach should give you smooth camera transitions that follow the curvature of the Earth while keeping your target location centered in the viewport.