feat: set correct sun angle from current time

Thanks ChatGPT for that one!!

How to find the current sun angle from Earth's rotation in javascript?
A hint: Where is the sun shining on the earth at the time I visit the site? I guess the time zone that's closest to noon.

the dayTime variable needs to be from 0 to 1

const d = degToRad(360 / dayTime)
const sunPos = new Vec3(
    Math.cos(d),
    Math.sin(d) * Math.sin(0),
    Math.sin(d) * Math.cos(0)
)

apps/website/src/modules/globe/index.ts

@@ -16,21 +16,10 @@ export class Globe {
         this.markers = options.markers || []
         this.zoom = 1.3075
 
-        // Calculate the current sun position from a given location
-        // const locations = [
-        //     {
-        //         lat: -37.840935,
-        //         lng: 144.946457,
-        //         tz: 'Australia/Melbourne',
-        //     },
-        //     {
-        //         lat: 48.856614,
-        //         lng: 2.3522219,
-        //         tz: 'Europe/Paris',
-        //     }
-        // ]
-        // const location = locations[1]
-        // const localDate = new Date(new Date().toLocaleString('en-US', { timeZone: location.tz }))
+        // Calculate local time for sun position
+        const date = new Date()
+        const localHour = date.getHours() + date.getTimezoneOffset() / 60
+        this.options.sunAngle = (localHour - 12) / 12
 
         // Parameters
         this.params = {
@@ -39,7 +28,6 @@ export class Globe {
             enableMarkers: options.enableMarkers,
             enableMarkersLinks: options.enableMarkersLinks,
             sunAngle: options.sunAngle || 0,
-            sunAngleDelta: 1.8,
         }
 
         // Misc
@@ -121,11 +109,10 @@ export class Globe {
         imgDark.src = this.options.mapFileDark
 
         // Create light
-        const lightD = degToRad(7 * 360 / 24)
         const sunPosition = new Vec3(
-            Math.cos(lightD),
-            Math.sin(lightD) * Math.sin(0),
-            Math.sin(lightD) * Math.cos(0)
+            Math.cos(this.params.sunAngle),
+            Math.sin(this.params.sunAngle) * Math.sin(0),
+            Math.sin(this.params.sunAngle) * Math.cos(0)
         )
 
         // Create program
@@ -362,11 +349,11 @@ export type Marker = {
 /**
  * Detect WebGL support
  */
-function WebGLSupport () {
+const WebGLSupport = (): boolean => {
     try {
         const canvas = document.createElement('canvas')
         return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
-    } catch(e) {
+    } catch (e) {
         return false
     }
 }
@@ -407,4 +394,4 @@ const degToRad = (deg: number) => deg * Math.PI / 180
 /**
  * Get current timestamp (performance or Date)
  */
-const now = () => (typeof performance === 'undefined' ? Date : performance).now()
+const now = () => (typeof performance === 'undefined' ? Date : performance).now()

apps/website/src/modules/globe/pane.ts

@@ -47,9 +47,10 @@ export const createPane = (ctx: any) => {
         title: 'Misc',
     })
     // Sun position
-    misc.addInput(ctx.params, 'sunAngleDelta', {
-        label: 'Sun angle delta',
+    misc.addInput(ctx.params, 'sunAngle', {
+        label: 'Sun angle',
         min: 0,
-        max: 2 * Math.PI,
+        max: 1,
+        step: 0.01,
     })
 }