add destroy on Globe + startRoation option

package.json

@@ -22,7 +22,6 @@
     "lazysizes": "^5.2.0",
     "normalize.css": "^8.0.1",
     "polka": "^1.0.0-next.11",
-    "rellax": "^1.12.1",
     "scroll-out": "^2.2.8",
     "sirv": "^0.4.2",
     "svelte-lazy": "^0.1.10",
@@ -45,6 +44,7 @@
     "postcss": "^7.0.27",
     "postcss-load-config": "^2.1.0",
     "postcss-preset-env": "^6.7.0",
+    "rellax": "^1.12.1",
     "rollup": "^2.6.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-glslify": "^1.2.0",

src/globe/index.js

@@ -7,7 +7,7 @@ import { Container, Mesh, Material, Texture, SphereGeometryBuffer, PlaneGeometry
 import GlobeVS from './globe-vs'
 import GlobeFS from './globe-fs'
 
-const FOV = 1;
+const FOV = 1;//camera Field of view; we use 1 to prevent strong perspective effect on the globe
 
 /** get 3D position on a sphere from longitute lattitude */
 const lonLatToVector3 = (lng, lat) => {
@@ -19,6 +19,11 @@ const lonLatToVector3 = (lng, lat) => {
     return [x,y,z]
 }
 
+function degToRad(deg) {
+    return deg * Math.PI/180
+}
+
+
 class WebglGlobe {
 
     // Constructor
@@ -35,6 +40,8 @@ class WebglGlobe {
         this.currMarkerScrollOffset    = 0
         this.markersScrollOffset       = 0
         this.globeScrollOffset         = 0
+        this.globeAutoRotation         =  degToRad(this.options.rotationStart * -1) || 0
+
 
         let gl
         let canvas = document.createElement('canvas')
@@ -252,6 +259,14 @@ class WebglGlobe {
         }
     }
 
+
+    destroy() {
+        this.disable()//stop render loop
+        document.body.removeChild( this.$markerWrapper )
+        document.body.removeChild( this.renderer.canvas )
+        this.camera.delete()//to remove event listeners
+    }
+
     /**
      * Flag to stop rendering the webgl if the globe isnt visible
      * This helps saving perfs and battery
@@ -283,7 +298,8 @@ class WebglGlobe {
         mat4.multiply(this.viewProjectionMatrix, this.viewProjectionMatrix, this.camera.inverseWorldMatrix)
 
         // Auto rotate the globe
-        this.globeMesh.rotation[1] += this.options.autoRotationSpeed
+        this.globeAutoRotation += this.options.autoRotationSpeed
+        this.globeMesh.rotation[1] = this.globeAutoRotation
         this.globeMesh.updateMatrix()
         this.globeMesh.updateWorldMatrix()
 

src/molecules/InteractiveGlobe.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { onMount } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
     import { continents, locations } from 'utils/store'
     import { getPosition } from 'utils/functions'
     // Dependencies
@@ -42,6 +42,10 @@
     }
 
 
+    onDestroy(async ()=>{
+        globe && globe.destroy()
+    })
+
     /*
     ** Run code when mounted
     */
@@ -53,7 +57,8 @@
         globe = new InteractiveGlobe({
             el: scope,
             cameraDistance: size, // Smaller number == larger globe
-            // autoRotationSpeed: -0.0025,
+            autoRotationSpeed: -0.0025,
+            rotationStart: 90, //in degrees
             scrollSmoothing: 0.5,
             texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1  ? '4k' : '2k'}.png`,
             markers: [ ...$locations.map(location => {
@@ -68,9 +73,8 @@
                 }
             }) ],
             centerPositions: [ ...$continents.map(continent => continent.countries) ],
-            onLinkClicked: () => {}
+            onLinkClicked: () => {  }
         })
-        console.log(globe.options.centerPositions)
 
         // Run the globe
         onResize()