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

Code clean

Browse Source
This commit is contained in:
Félix Péault
2020-04-10 11:58:05 +02:00
parent abe09f0f69
commit 85cb624a31
5 changed files with 73 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/globe/index.js
View File

@@ -8,8 +8,8 @@ import settings from './settings'
import GlobeVS from './globe-vs'
import GlobeFS from './globe-fs'
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
const hexToRgb = hex => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result ? [
parseInt(result[1], 16) / 255,
parseInt(result[2], 16) / 255,
@@ -17,12 +17,12 @@ function hexToRgb(hex) {
] : [0,0,0]
}
function lonLatToVector3(lng, lat) {
var phi = (90-lat)*(Math.PI/180),
theta = (lng+180)*(Math.PI/180),
x = -( Math.sin(phi) * Math.cos(theta) ),
z = Math.sin(phi) * Math.sin(theta),
y = Math.cos(phi)
const lonLatToVector3 = (lng, lat) => {
const phi = (90 - lat) * (Math.PI / 180)
const theta = (lng + 180) * (Math.PI / 180)
const x = -(Math.sin(phi) * Math.cos(theta))
const z = Math.sin(phi) * Math.sin(theta)
const y = Math.cos(phi)
return [x,y,z]
}
@@ -104,7 +104,7 @@ class WebglGlobe {
radius: 1,
widthSegments: 100, heightSegments: 100
})
this.scene.add( this.globeMesh )
this.scene.add(this.globeMesh)
this.markers = []
let markers = this.cities
@@ -125,16 +125,16 @@ class WebglGlobe {
})
// Position marker
let p = lonLatToVector3( markers[i].lng, markers[i].lat )
let p = lonLatToVector3(markers[i].lng, markers[i].lat)
markerMesh.position[0] = p[0]
markerMesh.position[1] = p[1]
markerMesh.position[2] = p[2]
this.scene.add( markerMesh )
this.scene.add(markerMesh)
// Wrap marker in link
let el = document.createElement('a')
el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug )
el.setAttribute('sapper-noscroll','')
el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug)
el.setAttribute('sapper-noscroll', '')
// Add label
let span = document.createElement('span')
@@ -166,7 +166,7 @@ class WebglGlobe {
el.addEventListener('animationend', () => el.classList.remove('hover'))
// Append marker to HTML
this.$el.appendChild( el )
this.$el.appendChild(el)
this.markers.push({
mesh: markerMesh,
el: el,
@@ -212,18 +212,18 @@ class WebglGlobe {
mat4.multiply(this.viewProjectionMatrix, this.viewProjectionMatrix, this.camera.inverseWorldMatrix)
let refPos = vec3.create()
vec3.set(refPos, 0, 1, 0 )
vec3.set(refPos, 0, 1, 0)
vec3.transformMat4(refPos, refPos, this.viewProjectionMatrix)
let refx = ( (refPos[0] + 1) / 2) * this.width
let refx = ((refPos[0] + 1) / 2) * this.width
let refy = (1. - (refPos[1] + 1) / 2) * this.height
let dir2 = vec2.create()
vec2.set( dir2, refx, refy )
vec2.set(dir2, refx, refy)
let center2 = vec2.create()
vec2.set( center2, this.width/2, this.height/2 )
vec2.set(center2, this.width / 2, this.height / 2)
let dir2d2 = vec2.clone(dir2, dir2)
vec2.subtract( dir2d2, dir2d2, center2 )
this.circleScreenSize = vec2.length( dir2d2 ) * 1.04
vec2.subtract(dir2d2, dir2d2, center2)
this.circleScreenSize = vec2.length(dir2d2) * 1.04
}
// Update
@@ -245,7 +245,8 @@ class WebglGlobe {
let needsUpdate = false
if (this.cameraX != this.camera.worldMatrix[12] ||
this.cameraY != this.camera.worldMatrix[13] ||
this.cameraZ != this.camera.worldMatrix[14]) {
this.cameraZ != this.camera.worldMatrix[14]
) {
this.cameraX = this.camera.worldMatrix[12]
this.cameraY = this.camera.worldMatrix[13]
this.cameraZ = this.camera.worldMatrix[14]
@@ -260,37 +261,37 @@ class WebglGlobe {
let screenPos = vec3.create()
this.markers.forEach((marker, i) => {
vec3.set(screenPos, marker.position[0], marker.position[1], marker.position[2] )
vec3.set(screenPos, marker.position[0], marker.position[1], marker.position[2])
vec3.transformMat4(screenPos, screenPos, this.viewProjectionMatrix)
let x = ( (screenPos[0] + 1) / 2) * this.width
let x = ((screenPos[0] + 1) / 2) * this.width
let y = (1. - (screenPos[1] + 1) / 2) * this.height
let N = vec3.create()
vec3.set( N, marker.position[0], marker.position[1], marker.position[2] )
vec3.normalize( N, N )
vec3.set(N, marker.position[0], marker.position[1], marker.position[2])
vec3.normalize(N, N)
let V = vec3.create()
vec3.set( V, marker.position[0], marker.position[1], marker.position[2] )
vec3.subtract( V, V, this.cameraPosition )
vec3.normalize( V, V )
vec3.set(V, marker.position[0], marker.position[1], marker.position[2])
vec3.subtract(V, V, this.cameraPosition)
vec3.normalize(V, V)
//behind
if ( vec3.dot( V, N ) * -1 < 0 ) {
if (vec3.dot(V, N) * -1 < 0) {
let dir = vec2.create()
vec2.set( dir, x, y )
vec2.set(dir, x, y)
let center = vec2.create()
vec2.set( center, this.width/2, this.height/2 )
vec2.set(center, this.width/2, this.height/2)
let dir2d = vec2.clone(dir, dir)
vec2.subtract( dir2d, dir2d, center )
vec2.normalize( dir2d, dir2d )
vec2.scale( dir2d, dir2d, this.circleScreenSize )
vec2.subtract(dir2d, dir2d, center)
vec2.normalize(dir2d, dir2d)
vec2.scale(dir2d, dir2d, this.circleScreenSize)
vec2.add(dir2d, dir2d, center)
marker.el.style.transform = `translate(${dir2d[0]}px, ${dir2d[1]}px) translateZ(0)`
marker.el.classList.remove('is-active')
}
else {
//vec3.dot( V, N ) * -1 < 0 ? (1 - vec3.dot( V, N ) / 0.1 ) : 1;//Math.max( 0, vec3.dot( N, V ) );
//vec3.dot(V, N) * -1 < 0 ? (1 - vec3.dot(V, N) / 0.1) : 1;//Math.max(0, vec3.dot(N, V));
marker.el.style.transform = `translate(${x}px, ${y}px) translateZ(0)`
marker.el.classList.add('is-active')
}

6
src/molecules/InteractiveGlobe.svelte
View File

@@ -31,7 +31,7 @@
// Init the globe from library
globe = new Globe({
el: scope,
texture: '/img/globe/map-2k.png',
texture: `/img/globe/map-${window.innerWidth >= 992 ? '4k' : '2k'}.png`,
markers: [...$locations.map(location => {
return {
name: location.name,
@@ -42,8 +42,8 @@
lng: location.coordinates.lng
}
})],
onLinkClicked: () => {},
cameraDistance: 3
cameraDistance: 3,
onLinkClicked: () => {}
})
// Run the globe

9
src/style/organisms/_locations.scss
View File

@@ -47,19 +47,16 @@
@include breakpoint (sm) {
grid-template-columns: repeat(3, 1fr);
grid-column-gap: pxVW(96);
grid-row-gap: pxVW(120);
// TODO: center alone locations on a row?
grid-row-gap: pxVW(96);
min-height: 200px;
margin-top: 112px;
margin-bottom: pxVW(120);
}
@include breakpoint (md) {
margin-bottom: pxVW(232);
}
@include breakpoint (xl) {
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 120px;
margin-bottom: 232px;
grid-row-gap: 120px;
margin-bottom: 184px;
}
}
}