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

Implement Interactive Globe on Homepage

Browse Source
This commit is contained in:
Félix Péault
2021-10-03 13:56:11 +02:00
parent 2634e0473a
commit f6da3c4b55
8 changed files with 355 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/modules/globe/index.js
View File

@@ -24,7 +24,6 @@ const degToRad = deg => deg * Math.PI / 180
class WebglGlobe {
// Constructor
constructor (options) {
this.$el = options.el // The DOM reference node
@@ -34,7 +33,7 @@ class WebglGlobe {
this.options.cameraDistance = 1 // this.options.cameraDistance || 1 // A multiplier to move camera backward or forward
this.options.opacity = this.options.opacity || 1
this.cities = options.markers // List of cities with their options
this.locations = options.markers // List of locations with their options
this._canUpdate = false
this.hasUpdateCameraPos = false
this.referenceHeight = 1 // Used to set camera distance from globe where referenceHeight == window height
@@ -157,7 +156,7 @@ class WebglGlobe {
* Create DOM nodes for markers and 3D positions
*/
this.markers = []
let markers = this.cities
let markers = this.locations
// Instance all markers
for (let i = 0; i < markers.length; i++) {
@@ -362,7 +361,7 @@ class WebglGlobe {
vec2.set(dir, x, y)
let center = vec2.create()
vec2.set(center, this.width/2, this.height/2)
let dir2d = vec2.clone(dir, dir)
let dir2d = vec2.clone(dir) // vec2.clone(dir, dir)
vec2.subtract(dir2d, dir2d, center)
vec2.normalize(dir2d, dir2d)
vec2.scale(dir2d, dir2d, this.circleScreenSize)