diff --git a/src/globe/index.js b/src/globe/index.js index fde5038..6615ccb 100644 --- a/src/globe/index.js +++ b/src/globe/index.js @@ -31,7 +31,8 @@ class WebglGlobe { 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.options.cameraDistance = 1//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 @@ -39,7 +40,7 @@ class WebglGlobe { this.currMarkerScrollOffset = 0 this.markersScrollOffset = 0 this.globeScrollOffset = 0 - this.globeAutoRotation = degToRad(this.options.rotationStart * -1) || 0 + this.globeAutoRotation = degToRad(this.options.rotationStart * -1) || 0 this._isHoverMarker = false let gl @@ -233,6 +234,9 @@ class WebglGlobe { this.width = window ? window.innerWidth : 0 this.height = window ? window.innerHeight : 0 + //fit globe to container height + this.options.cameraDistance = this.height / this.$el.clientHeight; + // 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) @@ -283,10 +287,14 @@ class WebglGlobe { * This helps saving perfs and battery */ enable () { + this.renderer.canvas.style.opacity = 1 + this.$markerWrapper.style.opacity = 1 this._canUpdate = true } - disable () { + disable () { + this.renderer.canvas.style.opacity = 0 + this.$markerWrapper.style.opacity = 0 this._canUpdate = false } diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss index 4450551..766e77e 100644 --- a/src/style/molecules/_globe.scss +++ b/src/style/molecules/_globe.scss @@ -33,7 +33,6 @@ // } // END DEBUG // - /* ** Partial globe */ @@ -44,8 +43,6 @@ opacity: 0.5; } - - /* ** Markers */