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

Add zoom level as parameter

Browse Source
This commit is contained in:
Félix Péault
2022-07-26 23:43:03 +02:00
parent be0c58c744
commit 378c707d57
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/modules/globe2/index.ts
View File

@@ -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)`
})
}