diff --git a/src/modules/globe2/index.ts b/src/modules/globe2/index.ts index fc2c87b..fbfbea5 100644 --- a/src/modules/globe2/index.ts +++ b/src/modules/globe2/index.ts @@ -19,6 +19,7 @@ export class Globe { this.params = { autoRotate: options.autoRotate, speed: options.speed, + zoom: 1.305, } // Misc @@ -59,7 +60,7 @@ export class Globe { // Create camera this.camera = new Camera(this.gl) // TODO: Why 1.315? Is there a way to calculate this number? - this.camera.position.set(0, 0, 1.315) + this.camera.position.set(0, 0, this.params.zoom) // Create controls this.controls = new Orbit(this.camera, { @@ -163,6 +164,17 @@ export class Globe { this.markers.forEach((marker: Marker) => { const markerEl = this.getMarker(marker.slug) + // Define position + const position = lonlatVec3(marker.lng, marker.lat) + + // Scale marker position to fit globe size + marker.position = [position[0] *= 0.5, position[1] *= 0.5, position[2] *= 0.5] + + // Position marker + const posX = (marker.position[0] + 1) * (this.width / this.params.zoom) + const posY = (1 - marker.position[1]) * (this.height / this.params.zoom) + markerEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)` + // Entering marker markerEl.addEventListener('mouseenter', () => { this.hoveringMarker = true @@ -172,17 +184,6 @@ export class Globe { this.hoveringMarker = false }, false) - // Define position - const position = lonlatVec3(marker.lng, marker.lat) - - // Scale marker position to fit globe size - marker.position = [position[0] *= 0.5, position[1] *= 0.5, position[2] *= 0.5] - - // Position marker - const posX = (marker.position[0] + 1) * (this.width / 1.315) - const posY = (1 - marker.position[1]) * (this.height / 1.315) - markerEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)` - console.log(marker) return marker }) @@ -197,9 +198,9 @@ export class Globe { // this.camera.project(screenVector) - // let posX = (screenVector.x + 1) * (this.options.width / 1.315) + // let posX = (screenVector.x + 1) * (this.options.width / this.params.zoom) // // // posX /= this.mesh.rotation.y - // let posY = (1 - screenVector.y) * (this.options.height / 1.315) + // let posY = (1 - screenVector.y) * (this.options.height / this.params.zoom) // markerEl.style.transform = `translate3d(${posX}px, ${posY}px, 0)` }) }