BFCM Globe 2023: Camera Rotation Fix

rotation_fix.js

// First rotate along Y axis, then rotate along X axis
const rotationOrder = "YXZ";

// Offset phi by Math.PI * 0.5 (90 degrees) since phi is '0' along the Y axis, but we want '0' to be along the X axis to align with Three.js' coordinates
const rotation = new THREE.Euler(
  cameraSettings.phi - Math.PI * 0.5,
  cameraSettings.theta,
  0,
  rotationOrder
);

// Rotate the default up vector (0, 1, 0) by our rotation
const upVector = new THREE.Vector3(0, 1, 0).applyEuler(rotation);
camera.up.copy(upVector);