flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Globe: Add more props settings, Randomly position globe to a continent

Browse Source 
- Add a little delay before restarting the rotation when hovering a marker
This commit is contained in:
Félix Péault
2020-04-19 16:49:10 +02:00
parent 4fb2c4e93a
commit 302af713d0
4 changed files with 44 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/globe/index.js
View File

@@ -7,7 +7,7 @@ import { Container, Mesh, Material, Texture, SphereGeometryBuffer, PlaneGeometry
import GlobeVS from './globe-vs'
import GlobeFS from './globe-fs'
const FOV = 1;//camera Field of view; we use 1 to prevent strong perspective effect on the globe
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,9 +19,8 @@ const lonLatToVector3 = (lng, lat) => {
return [x,y,z]
}
function degToRad(deg) {
return deg * Math.PI/180
}
// Convert degrees to radians
const degToRad = deg => deg * Math.PI / 180
class WebglGlobe {
@@ -162,9 +161,9 @@ class WebglGlobe {
let p = lonLatToVector3(markers[i].lng, markers[i].lat)
// Scale marker position to fit globe size
p[0] *= this.referenceHeight/2;
p[1] *= this.referenceHeight/2;
p[2] *= this.referenceHeight/2;
p[0] *= this.referenceHeight / 2
p[1] *= this.referenceHeight / 2
p[2] *= this.referenceHeight / 2
// Wrap marker in link
let el = document.createElement('a')
@@ -200,11 +199,15 @@ class WebglGlobe {
// Add class on hover
el.addEventListener('mouseenter', () => {
this._isHoverMarker = true
el.classList.add('hover')
// Stop globe rotation
this._isHoverMarker = true
// Clear timeout to be sure
clearTimeout(this.hoverTimeout)
})
el.addEventListener('mouseleave', () => {
this._isHoverMarker = false
// Restart rotation after a little delay
this.hoverTimeout = setTimeout(() => this._isHoverMarker = false, 400)
})
el.addEventListener('animationend', () => {
el.classList.remove('hover')
@@ -239,14 +242,14 @@ class WebglGlobe {
this.camera.updateProjectionMatrix()
// 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._cameraDistance = (this.referenceHeight * this.options.cameraDistance) / 2 / Math.tan(Math.PI * FOV / 360)
this.camera.update(true)
/**
* When markers are behind the globe, clamp their position
* to this size to make them move along the circle edge
*/
this.circleScreenSize = (this.height / 2) * (1 / this.options.cameraDistance);
this.circleScreenSize = (this.height / 2) * (1 / this.options.cameraDistance)
}
/**
@@ -254,7 +257,7 @@ class WebglGlobe {
* Instead, we move the globe vertex inside the vertex shadder after compute the project on screen, so we pass the 'scroll' position to a uniform
*/
updateCameraPos (y, scrollDiff) {
this.globeScrollOffset = y;
this.globeScrollOffset = y
this.markersScrollOffset = scrollDiff
// Avoid jump due to smoothing when setting it for first time as the inital values are 0
@@ -267,7 +270,7 @@ class WebglGlobe {
}
}
// Destroy
destroy() {
this.disable()//stop render loop
document.body.removeChild( this.$markerWrapper )