From a4176fed3b4c501e3e94e8daa4519474884700bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 19 Jul 2022 11:54:50 +0200
Subject: [PATCH] Update Globe and add comments

---
 .../organisms/InteractiveGlobe2.svelte        | 27 +++-----------
 src/modules/globe2/index.ts                   | 37 +++++++++++--------
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/src/components/organisms/InteractiveGlobe2.svelte b/src/components/organisms/InteractiveGlobe2.svelte
index 7ac1132..6ec8dc2 100644
--- a/src/components/organisms/InteractiveGlobe2.svelte
+++ b/src/components/organisms/InteractiveGlobe2.svelte
@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
-    import { fade, fly } from 'svelte/transition'
+    import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { Globe, type Marker } from '$modules/globe2'
     import { getRandomItem } from '$utils/functions'
@@ -12,7 +12,6 @@
     import Image from '$components/atoms/Image.svelte'
 
     let innerWidth: number
-    let offsetWidth: number, offsetHeight: number
     let globeParentEl: HTMLElement, globeEl: HTMLElement
     let globe: any
     let observer: IntersectionObserver
@@ -27,11 +26,7 @@
     const markers = locations.map(({ name, slug, country, coordinates: { coordinates }}): Marker => ({
         name,
         slug,
-        country: {
-            name: country.name,
-            slug: country.slug,
-            flag: country.flag,
-        },
+        country: { ...country },
         lat: coordinates[1],
         lng: coordinates[0],
     }))
@@ -41,22 +36,18 @@
         globe = new Globe({
             el: globeEl,
             parent: globeParentEl,
-            width: offsetWidth,
-            height: offsetHeight,
             mapFile: `/images/globe-map-${globeResolution}.png`,
             dpr: Math.min(Math.round(window.devicePixelRatio), 2),
             autoRotate: true,
-            speed: 0.0035,
+            speed: 0.003,
             rotationStart: randomContinent.rotation,
             markers,
             pane: import.meta.env.DEV,
         })
 
-        // Define cluster locations
+        // TODO: Define cluster locations and position it
         clusterLocations = locations.filter((loc: any) => loc.country.slug === 'france')
 
-        // console.log(globe)
-
         resize()
 
         // Render only if in viewport
@@ -100,10 +91,7 @@
 
     // Resize
     const resize = () => {
-        globe.resize({
-            width: offsetWidth,
-            height: offsetHeight,
-        })
+        globe.resize()
     }
 
     // Destroy
@@ -119,10 +107,7 @@
 
 <div class="globe" bind:this={globeParentEl}>
     <div class="globe__inner">
-        <div class="globe__canvas"
-            bind:this={globeEl}
-            bind:offsetWidth bind:offsetHeight
-        />
+        <div class="globe__canvas" bind:this={globeEl} />
     </div>
 
     <ul class="globe__markers">
diff --git a/src/modules/globe2/index.ts b/src/modules/globe2/index.ts
index b2c03d0..662d58d 100644
--- a/src/modules/globe2/index.ts
+++ b/src/modules/globe2/index.ts
@@ -11,6 +11,8 @@ export class Globe {
         this.options = options
         this.el = options.el
         this.parent = options.parent
+        this.width = this.el.offsetWidth
+        this.height = this.el.offsetHeight
         this.markers = options.markers || []
 
         // Parameters
@@ -28,10 +30,7 @@ export class Globe {
         // Run globe after check for WebGL support
         if (this.webgl) {
             this.build()
-            this.resize({
-                width: this.options.width,
-                height: this.options.height,
-            })
+            this.resize()
             this.render()
         }
 
@@ -59,6 +58,7 @@ export class Globe {
 
         // Create camera
         this.camera = new Camera(this.gl)
+        // TODO: Why 1.315? Is there a way to calculate this number?
         this.camera.position.set(0, 0, 1.315)
 
         // Create controls
@@ -84,8 +84,9 @@ export class Globe {
         })
 
         // Create light
+        // TODO: How to create a nicer light that doesn't fade to 0? Just creating a "dark" area where you still can read markers and see countries/continents
         // this.light = new Vec3(0, 50, 150)
-        this.light = new Vec3(0, 0, 1000)
+        this.light = new Vec3(0, 0, 15)
 
         // Add map texture
         const map = new Texture(this.gl)
@@ -113,7 +114,7 @@ export class Globe {
         })
         this.mesh.setParent(this.scene)
 
-        // Define random continent position
+        // Start globe angle with a random continent's position
         if (this.options.rotationStart) {
             this.mesh.rotation.y = degToRad(this.options.rotationStart * -1) || 0
         }
@@ -177,6 +178,11 @@ export class Globe {
             // Scale marker position to fit globe size
             marker.position = [position[0] *= 0.5, position[1] *= 0.5, position[2] *= 0.5]
 
+            // Position marker
+            const posX = (marker.position[0] + 1) * (this.width / 1.315)
+            const posY = (1 - marker.position[1]) * (this.height / 1.315)
+            markerEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)`
+
             console.log(marker)
             return marker
         })
@@ -185,13 +191,14 @@ export class Globe {
     // Update markers
     updateMarkers () {
         this.markers.forEach((marker: Marker) => {
-            const markerEl = this.getMarker(marker.slug)
-            const screenVector = new Vec3(0,0,0)
-            screenVector.copy(marker.position)
-            this.camera.project(screenVector)
+            // const markerEl = this.getMarker(marker.slug)
+            // const screenVector = new Vec3(0,0,0)
+            // screenVector.copy(marker.position)
+            // this.camera.project(screenVector)
+
 
             // let posX = (screenVector.x + 1) * (this.options.width / 1.315)
-            // // posX /= this.mesh.rotation.y
+            // // // posX /= this.mesh.rotation.y
             // let posY = (1 - screenVector.y) * (this.options.height / 1.315)
             // markerEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)`
         })
@@ -201,9 +208,9 @@ export class Globe {
     /**
      * Resize method
      */
-    resize (options: any) {
+    resize () {
         // this.renderer.setSize(window.innerWidth, window.innerHeight)
-        this.renderer.setSize(options.width || this.options.width, options.height || this.options.height)
+        this.renderer.setSize(this.width, this.height)
         this.camera.perspective({
             aspect: this.gl.canvas.width / this.gl.canvas.height
         })
@@ -229,7 +236,7 @@ export class Globe {
             camera: this.camera,
         })
 
-        // Update light
+        // TODO: Update light
         // this.light.set(this.camera.position)
         // this.program.uniforms.u_lightWorldPosition.value = [this.mesh.rotation.y * 1, 50, 150]
 
@@ -264,8 +271,6 @@ export class Globe {
 type Options = {
     el: HTMLElement
     parent: HTMLElement
-    width: number
-    height: number
     mapFile: string
     dpr: number
     autoRotate: boolean