✨Globe: Position camera to current continent

Quite complex to figure out but needed to use spherical coordinates to apply to the camera, inspired from Three.js
Thanks @Tape on Discord/Three.js!

src/components/organisms/InteractiveGlobe.svelte

@@ -52,7 +52,10 @@
             autoRotate,
             speed,
             sunAngle: 2,
-            rotationStart: randomContinent.rotation,
+            rotationStart: {
+                x: randomContinent.rotation_x,
+                y: randomContinent.rotation_y,
+            },
             enableMarkers,
             enableMarkersLinks: enableMarkersLinks && type !== 'cropped',
             markers,

src/modules/globe/index.ts

@@ -16,11 +16,7 @@ export class Globe {
         this.width = this.el.offsetWidth
         this.height = this.el.offsetHeight
         this.markers = options.markers || []
-        this.globeZoom = 1.3075
+        this.zoom = 1.3075
-        this.globeRotation = {
-            lat: degToRad(-this.options.rotationStart) || 0,
-            // lng: degToRad(-this.options.rotationStart.lng) || 0,
-        }
 
         // Calculate the current sun position from a given location
         const locations = [
@@ -93,7 +89,12 @@ export class Globe {
 
         // Create camera
         this.camera = new Camera(this.gl)
-        this.camera.position.set(0, 0, this.globeZoom)
+        this.camera.position.set(setFromSphericalCoords(
+            this.zoom,
+            degToRad(this.options.rotationStart.y || 40), // phi: y
+            degToRad(this.options.rotationStart.x || 0), // theta: x
+        ))
+        this.camera.lookAt(0,0,0)
 
         // Create controls
         this.controls = new Orbit(this.camera, {
@@ -285,8 +286,7 @@ export class Globe {
 
         // Rotate globe if not dragging neither hovering marker
         if (this.params.autoRotate && !this.hoveringMarker) {
-            this.globeRotation.lat += this.params.speed * delta
+            this.globe.rotation.y += this.params.speed * delta
-            this.globe.rotation.y = this.globeRotation.lat
         }
 
         // Update controls and renderer
@@ -340,7 +340,7 @@ type Options = {
     autoRotate: boolean
     speed: number
     sunAngle: number
-    rotationStart?: number
+    rotationStart?: { x: number, y: number }
     enableMarkers?: boolean
     enableMarkersLinks?: boolean
     markers?: any[]
@@ -390,6 +390,19 @@ const latLonToVec3 = (lat: number, lng: number) => {
     return new Vec3(x,y,z)
 }
 
+
+/**
+ * Get position from spherical coordinates
+ */
+const setFromSphericalCoords = (radius: number, phi: number, theta: number) => {
+    const sinPhiRadius = Math.sin(phi) * radius
+    const x = sinPhiRadius * Math.sin(theta)
+    const y = Math.cos(phi) * radius
+    const z = sinPhiRadius * Math.cos(theta)
+
+    return new Vec3(x,y,z)
+}
+
 /**
  * Convert Degrees to Radians
  */

src/routes/+layout.server.ts

@@ -44,7 +44,8 @@ export const load: PageServerLoad = async () => {
             continents: continent (filter: { countries: { slug: { _neq: "_empty" }}}) {
                 name
                 slug
-                rotation
+                rotation_x
+                rotation_y
             }
 
             settings {