Update Globe and add comments

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: {
+        country: { ...country },
-            name: country.name,
-            slug: country.slug,
-            flag: country.flag,
-        },
         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({
+        globe.resize()
-            width: offsetWidth,
-            height: offsetHeight,
-        })
     }
 
     // Destroy
@@ -119,10 +107,7 @@
 
 <div class="globe" bind:this={globeParentEl}>
     <div class="globe__inner">
-        <div class="globe__canvas"
+        <div class="globe__canvas" bind:this={globeEl} />
-            bind:this={globeEl}
-            bind:offsetWidth bind:offsetHeight
-        />
     </div>
 
     <ul class="globe__markers">

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({
+            this.resize()
-                width: this.options.width,
-                height: this.options.height,
-            })
             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 markerEl = this.getMarker(marker.slug)
-            const screenVector = new Vec3(0,0,0)
+            // const screenVector = new Vec3(0,0,0)
-            screenVector.copy(marker.position)
+            // screenVector.copy(marker.position)
-            this.camera.project(screenVector)
+            // 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