Globe edits WIP

- Added visible continents to options

src/globe/index.js

@@ -23,17 +23,15 @@ class WebglGlobe {
 
     // Constructor
     constructor (options) {
-
-        this.$el                       = options.el//the Dom reference node
+        this.$el                       = options.el // The DOM reference node
         this.options                   = options
         this.options.autoRotationSpeed = this.options.autoRotationSpeed || 0
-        this.options.scrollSmoothing   = this.options.scrollSmoothing   || 0.5 // smooth the globe position to avoid janks on scroll(lower==smoother)
-        this.options.cameraDistance    = this.options.cameraDistance    || 1 //a multiplier to move camera backward or forward
-        this.cities                    = options.markers//list of cities with their options
-        
+        this.options.scrollSmoothing   = this.options.scrollSmoothing   || 0.5 // Smooth the globe position to avoid janks on scroll (lower == smoother)
+        this.options.cameraDistance    = this.options.cameraDistance    || 1 // A multiplier to move camera backward or forward
+        this.cities                    = options.markers // List of cities with their options
         this._canUpdate                = false
         this.hasUpdateCameraPos        = false
-        this.referenceHeight           = 1;//used to set camera distance from globe where referenceHeight == window height
+        this.referenceHeight           = 1 // Used to set camera distance from globe where referenceHeight == window height
         this.currMarkerScrollOffset    = 0
         this.markersScrollOffset       = 0
         this.globeScrollOffset         = 0
@@ -54,11 +52,10 @@ class WebglGlobe {
 
     // Build
     buildWebglScene () {
-
         this.renderer = new Renderer({
-            //to allow transparent background on webgl canvas
+            // To allow transparent background on webgl canvas
             alpha: true,
-            //only enable antialiasing if screen is small with no retina(for performances reasons)
+            // Enable antialiasing only if screen is small with no retina (for performances reasons)
             antialias: window.innerWidth < 768 || window.devicePixelRatio == 1 ? true : false,
         })
 
@@ -75,7 +72,7 @@ class WebglGlobe {
         // The markers DOM nodes wrapper
         // this wrapper is added just next to the canvas, at the end of body tag
         this.$markerWrapper = document.createElement('div')
-        this.$markerWrapper.classList.add('markerWrapper')
+        this.$markerWrapper.classList.add('globe__markers')
         this.$markerWrapper.style.position = 'fixed'
         this.$markerWrapper.style.top  = 0
         this.$markerWrapper.style.left = 0
@@ -157,7 +154,7 @@ class WebglGlobe {
             // Position marker
             let p = lonLatToVector3(markers[i].lng, markers[i].lat)
 
-            //scale marker position to fit globe size
+            // Scale marker position to fit globe size
             p[0] *= this.referenceHeight/2;
             p[1] *= this.referenceHeight/2;
             p[2] *= this.referenceHeight/2;
@@ -211,7 +208,6 @@ class WebglGlobe {
 
     // Resize method
     resize () {
-        
         if (!this.supportWebgl) {
             return
         }
@@ -219,15 +215,15 @@ class WebglGlobe {
         this.width  = window ? window.innerWidth : 0
         this.height = window ? window.innerHeight : 0
 
-        //remove retina on small screen(aka mobile) to boost perfs
+        // Remove retina on small screen (aka mobile) to boost perfs
         this.renderer.setPixelRatio( window.innerWidth < 768 ? 1 : window.devicePixelRatio)
         this.renderer.resize(this.width , this.height)
 
-        //update camera aspect ratio
+        // Update camera aspect ratio
         this.camera.aspect = this.width  / this.height
         this.camera.updateProjectionMatrix()
 
-        //at which distance to put the camera when rotating arounf the globe
+        // Distance to put the camera when rotating around the globe
         this.camera._cameraDistance = (this.referenceHeight * this.options.cameraDistance) / 2 / Math.tan(Math.PI * FOV / 360);
         this.camera.update(true)
 
@@ -246,7 +242,7 @@ class WebglGlobe {
         this.globeScrollOffset   = y;
         this.markersScrollOffset = scrollDiff
 
-        //avoid jump due to smoothing when setting it for first time as the inital values are 0
+        // Avoid jump due to smoothing when setting it for first time as the inital values are 0
         if (!this.hasUpdateCameraPos) {
             this.hasUpdateCameraPos = true
             if (this.globeMesh.material.uniforms.uCameraOffsetY) {
@@ -270,7 +266,6 @@ class WebglGlobe {
 
     // Update
     update () {
-
         if (!this.supportWebgl || !this._canUpdate || !this.imageLoaded || !this.hasUpdateCameraPos) {
             return
         }
@@ -281,7 +276,7 @@ class WebglGlobe {
 
         this.currMarkerScrollOffset += (this.markersScrollOffset - this.currMarkerScrollOffset) * this.options.scrollSmoothing
 
-        //compute the camera view-projection matrix to use it on the markers
+        // Compute the camera view-projection matrix to use it on the markers
         this.camera.update()
         vec3.set(this.cameraPosition, this.camera.worldMatrix[12], this.camera.worldMatrix[13], this.camera.worldMatrix[14])
         mat4.copy(this.viewProjectionMatrix, this.camera.projectionMatrix)
@@ -294,31 +289,28 @@ class WebglGlobe {
 
         let screenPos = vec3.create()
         this.markers.forEach((marker, i) => {
-
-            //get marker 3D position and project it on screen to get 2D position
+            // Get marker 3D position and project it on screen to get 2D position
             vec3.set(screenPos, marker.position[0], marker.position[1], marker.position[2])
             vec3.transformMat4(screenPos, screenPos, this.globeMesh.worldMatrix)
             vec3.transformMat4(screenPos, screenPos, this.viewProjectionMatrix)
 
-            //marker 2D screen position (starting from top left corner of screen)
+            // Marker 2D screen position (starting from top left corner of screen)
             let x = ((screenPos[0] + 1) / 2) * this.width
             let y = (1. - (screenPos[1] + 1) / 2) * this.height
 
-            //compute marker Normal
+            // Compute marker Normal
             let N = vec3.create()
             vec3.set(N, marker.position[0], marker.position[1], marker.position[2])
             vec3.transformMat4(N, N, this.globeMesh.worldMatrix)
             vec3.normalize(N, N)
 
-            //compute view vector (camera direction) 
+            // Compute view vector (camera direction)
             let V = vec3.create()
             vec3.set(V, marker.position[0], marker.position[1], marker.position[2])
             vec3.subtract(V, V, this.cameraPosition)
             vec3.normalize(V, V)
 
-
-
-            //the marker is behind the globe: clamp it to the globe edge
+            // Marker is behind the globe: clamp it to the globe edge
             if (vec3.dot(V, N) * -1 < 0) {
                 let dir = vec2.create()
                 vec2.set(dir, x, y)
@@ -334,7 +326,7 @@ class WebglGlobe {
                 marker.el.style.transform = `translate(${dir2d[0]}px, ${dir2d[1]}px) translateZ(0)`
                 marker.el.classList.remove('is-active')
             }
-            //marker is in front of the globe; update 2D position
+            // Marker is in front of the globe; update 2D position
             else {
                 y += this.currMarkerScrollOffset
                 marker.el.style.transform = `translate(${x}px, ${y}px) translateZ(0)`
@@ -342,7 +334,7 @@ class WebglGlobe {
             }
         })
 
-        //render webgl frame
+        // Render WebGL frame
         this.renderer.clearColor(0,0,0,0) //[RGBA] alpha is set to 0 to have a transparent background on the webgl
         this.renderer.clear()
         this.renderer.render(this.scene, this.camera)

src/molecules/InteractiveGlobe.svelte

@@ -1,33 +1,31 @@
 <script>
     import { onMount } from 'svelte'
-    import { locations } from 'utils/store'
+    import { continents, locations } from 'utils/store'
+    import { getPosition } from 'utils/functions'
+    // Dependencies
     import ScrollOut from 'scroll-out'
-
-    function getPosition (node, scope) {
-        var root = scope || document;
-        var offsetTop  = node.offsetTop;
-        var offsetLeft = node.offsetLeft;
-        while (node && node.offsetParent && node.offsetParent != document && node !== root && root !== node.offsetParent ) {
-            offsetTop += node.offsetParent.offsetTop;
-            offsetLeft += node.offsetParent.offsetLeft;
-            node = node.offsetParent;
-        }
-        return {
-            top: offsetTop,
-            left: offsetLeft
-        };
-    }
+    import Lazy from 'svelte-lazy'
 
     // Props
     export let type = ''
+    export let size = 0.575
     let scope
     let globe
     let containerTop = 0
     let containerHeight = 0
-    let winHeight = window ? window.innerHeight : 0
 
-    const resize = () => {
-        winHeight = window ? window.innerHeight : 0
+
+    /*
+    ** Functions
+    */
+    // Globe update
+    const update = () => {
+        requestAnimationFrame(update)
+        globe.update()
+    }
+
+    // On resize
+    const onResize = () => {
         if (scope) {
             containerTop = getPosition(scope).top
             containerHeight = scope.clientHeight
@@ -36,44 +34,26 @@
         globe.update()
     }
 
-    const update = () => {
-        requestAnimationFrame(update)
-        globe.update()
-    }
-
-    const onScroll = (e)=> {
+    // On scroll
+    const onScroll = () => {
         let scrollDiff = (containerTop + window.innerHeight + (containerHeight - window.innerHeight) / 2) - document.documentElement.scrollTop
         let scrollRatio = (1 - (scrollDiff / window.innerHeight)) * 2
         globe && globe.updateCameraPos(scrollRatio, scrollDiff - window.innerHeight)
     }
 
+
     /*
     ** Run code when mounted
     */
     onMount(async () => {
-        
-        const globeScroll = ScrollOut({
-            once: false,
-            targets: scope,
-            // threshold: 1,
-            onShown:  () => { 
-                globe.enable()
-            },
-            onHidden: () => {
-                globe.disable()
-            },
-        })
-
-
         let InteractiveGlobe
-        if (process.browser) {
         // Import libraries and code
         await import('globe/index').then(module => InteractiveGlobe = module.default)
         // Init the globe from library
         globe = new InteractiveGlobe({
             el: scope,
-                cameraDistance: 0.5,//smaller number == larger globe
-                autoRotationSpeed: -0.0025,
+            cameraDistance: size, // Smaller number == larger globe
+            // autoRotationSpeed: -0.0025,
             scrollSmoothing: 0.5,
             texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1  ? '4k' : '2k'}.png`,
             markers: [ ...$locations.map(location => {
@@ -84,23 +64,31 @@
                     countrySlug: location.country.slug,
                     lat: location.coordinates.lat,
                     lng: location.coordinates.lng,
-                        className: location.slug === 'marseille' ? 'is-left' : '',
+                    className: location.close ? 'is-close' : '',
                 }
             }) ],
+            centerPositions: [ ...$continents.map(continent => continent.countries) ],
             onLinkClicked: () => {}
         })
+        console.log(globe.options.centerPositions)
 
         // Run the globe
-            resize()
+        onResize()
         update()
-        }
+
+        // Enable the globe only when shown
+        const globeScroll = ScrollOut({
+            once: false,
+            targets: scope,
+            onShown: () => {
+                globe.enable()
+                onScroll()
+            },
+            onHidden: () => globe.disable()
+        })
     })
 </script>
 
-<svelte:window on:resize={resize} on:scroll={onScroll} />
+<svelte:window on:resize={onResize} on:scroll={onScroll} />
 
-{#if type === 'part'}
-<div class="globe globe--cut" bind:this={scope} />
-{:else}
-<div class="globe" bind:this={scope} />
-{/if}
+<div class="globe" class:globe--part={type === 'part'} bind:this={scope} />

src/routes/_layout.svelte

@@ -23,6 +23,7 @@
                     data {
                         id
                         name
+                        coordinates
                     }
                 }
                 countries {
@@ -42,6 +43,7 @@
                         region
                         country { id }
                         description
+                        close
                         coordinates
                         illu_desktop { full_url }
                         illu_desktop_2x { full_url }

src/routes/choose.svelte

@@ -8,6 +8,8 @@
         pageReady,
         pageAnimation
     } from 'utils/store'
+    // Dependencies
+    import Lazy from 'svelte-lazy'
     // Components
     import IconArrow from 'atoms/IconArrow'
     import TitleSite from 'atoms/TitleSite'
@@ -65,7 +67,11 @@
             </div>
         </div>
 
+        {#if process.browser}
+        <Lazy offset={window.innerHeight}>
             <InteractiveGlobe />
+        </Lazy>
+        {/if}
 
         <Locations />
     </section>

src/routes/credits.svelte

@@ -1,7 +1,9 @@
 <script>
     import { onMount } from 'svelte'
     import { stores } from '@sapper/app'
-    import { site, pageReady } from 'utils/store'
+    import { site, pageReady, pageAnimation } from 'utils/store'
+    // Dependencies
+    import Lazy from 'svelte-lazy'
     // Components
     import IconArrow from 'atoms/IconArrow'
     import TitleSite from 'atoms/TitleSite'
@@ -76,7 +78,11 @@
             {/if}
         </div>
 
+        {#if process.browser}
+        <Lazy offset={window.innerHeight}>
             <InteractiveGlobe type="part" />
+        </Lazy>
+        {/if}
 
         <Footer />
     </section>

src/style/molecules/_globe.scss

@@ -31,15 +31,26 @@
         height: 2000px;
     }
 
-    // Cut
-    &--cut {
-        opacity: 0.5;
+
+    /*
+    ** Partial globe
+    */
+    &--part {
         overflow: hidden;
-        width: 100vw;
-        height: 35vw;
-        min-height: 400px;
-        padding: 0;
+        height: 30vw;
+        min-height: 300px;
+        opacity: 0.5;
     }
+
+
+
+    /*
+    ** Markers
+    */
+    &__markers {
+        // When dragging
+        &.is-grabbing {
+            cursor: grabbing;
         }
 
         // Marker
@@ -48,17 +59,18 @@
             z-index: 2;
             cursor: pointer;
             display: block;
-    top: 0;
-    left: 0;
+            top: -4px;
+            left: -4px;
             width: 8px;
             height: 8px;
+            padding: 4px;
             border-radius: 100%;
             opacity: 1;
             background: #ff6c89;
             will-change: transform;
 
             span {
-        transition: color 0.4s $ease-quart;
+                transition: color 0.4s $ease-quart, opacity 0.4s $ease-quart;
             }
 
             // Hover glow effect
@@ -69,8 +81,8 @@
             // Label
             &__label {
                 position: absolute;
-        bottom: -230%;
-        left: 230%;
+                bottom: -16px;
+                left: 16px;
                 color: transparent;
             }
             // Location city
@@ -103,30 +115,36 @@
                     }
                 }
             }
-}
 
-
-.marker.is-left {
-    .marker__label {
+            // Left positioned
+            &.is-left {
+                .marker {
+                    &__label {
                         left: auto;
-        right: 360%;
+                        right: 32px;
                     }
-    .marker__country {
+                    &__country {
                         text-align: right;
                     }
                 }
-
-// Grabbing
-.markerWrapper.is-grabbing {
-    cursor: grabbing;
             }
 
-
-
-// Part globe
-.globe--part {
-    overflow: hidden;
-    height: 30vw;
-    min-height: 300px;
-    opacity: 0.5;
+            // Marker is close to another one
+            // Show the marker infos only on hover
+            &.is-close {
+                .marker__label {
+                    opacity: 0;
+                    pointer-events: none;
+                }
+
+                // Show labels on hover
+                &:hover {
+                    .marker__label {
+                        opacity: 1;
+                        pointer-events: auto;
+                    }
+                }
+            }
+        }
+    }
 }

src/style/pages/_page.scss

@@ -92,7 +92,7 @@
     }
 
     // Globe
-    // .globe__cut {
+    // .globe {
     //     margin-top: 8vw;
     // }
 

src/utils/functions.js

@@ -44,6 +44,22 @@ export function throttle (fn, delay) {
 }
 
 
+/*
+** Get a DOM element's position
+*/
+export const getPosition = (node, scope) => {
+    const root = scope || document
+    let offsetTop = node.offsetTop
+    let offsetLeft = node.offsetLeft
+    while (node && node.offsetParent && node.offsetParent != document && node !== root && root !== node.offsetParent) {
+        offsetTop += node.offsetParent.offsetTop
+        offsetLeft += node.offsetParent.offsetLeft
+        node = node.offsetParent
+    }
+    return { top: offsetTop, left: offsetLeft }
+}
+
+
 /*
 ** Wrap string's each letters into a span
 */