You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
6.1 KiB
234 lines
6.1 KiB
function init() {
|
|
const container = document.getElementById('globe')
|
|
const canvas = container.getElementsByTagName('canvas')[0]
|
|
const width = 1000
|
|
const height = 800
|
|
const globeRadius = 200
|
|
const globeSegments = 64
|
|
const globeWidth = 4098 / 2
|
|
const globeHeight = 1968 / 2
|
|
|
|
const groups = {
|
|
globe: null,
|
|
globePoints: null,
|
|
tracePoints: null,
|
|
}
|
|
|
|
let data, scene, renderer, globe
|
|
const camera = {
|
|
object: null,
|
|
orbitControls: null,
|
|
angles: {
|
|
current: {
|
|
azimuthal: null,
|
|
polar: null,
|
|
},
|
|
target: {
|
|
azimuthal: null,
|
|
polar: null,
|
|
},
|
|
},
|
|
transition: {
|
|
current: 0,
|
|
target: 30,
|
|
},
|
|
}
|
|
|
|
|
|
function setup() {
|
|
scene = new THREE.Scene()
|
|
camera.object = new THREE.PerspectiveCamera(45, width / height, 1, 4000)
|
|
camera.object.position.z = -400
|
|
|
|
renderer = new THREE.WebGLRenderer({
|
|
canvas: canvas,
|
|
antialias: true,
|
|
opacity: 1,
|
|
})
|
|
renderer.setSize(width, height)
|
|
|
|
setupGlobe()
|
|
setupOrbitControls()
|
|
render()
|
|
}
|
|
|
|
setup()
|
|
|
|
function setupGlobe() {
|
|
const canvasSize = 128
|
|
const textureCanvas = document.createElement('canvas')
|
|
textureCanvas.width = canvasSize
|
|
textureCanvas.height = canvasSize
|
|
|
|
const canvasContext = textureCanvas.getContext('2d')
|
|
canvasContext.rect(0, 0, canvasSize, canvasSize)
|
|
const texture = new THREE.Texture(textureCanvas)
|
|
|
|
const geometry = new THREE.SphereGeometry(
|
|
globeRadius,
|
|
globeSegments,
|
|
globeSegments
|
|
)
|
|
const material = new THREE.MeshBasicMaterial({
|
|
map: texture,
|
|
transparent: true,
|
|
opacity: 0.5,
|
|
})
|
|
globe = new THREE.Mesh(geometry, material)
|
|
|
|
groups.globe = globe
|
|
groups.globe.name = 'Globe'
|
|
|
|
scene.add(groups.globe)
|
|
|
|
addPoints()
|
|
}
|
|
|
|
function addPoints() {
|
|
const mergedGeometry = new THREE.Geometry()
|
|
const pingGeometry = new THREE.SphereGeometry(0.5, 5, 5)
|
|
const material = new THREE.MeshBasicMaterial({
|
|
color: '#626177',
|
|
})
|
|
|
|
for (let point of pointdata.points) {
|
|
const pos = convertFlatCoordsToSphereCoords(point.x, point.y)
|
|
|
|
if (pos.x && pos.y && pos.z) {
|
|
pingGeometry.translate(pos.x, pos.y, pos.z)
|
|
mergedGeometry.merge(pingGeometry)
|
|
pingGeometry.translate(-pos.x, -pos.y, -pos.z)
|
|
}
|
|
}
|
|
|
|
const total = new THREE.Mesh(mergedGeometry, material)
|
|
groups.globePoints = total
|
|
groups.globePoints.name = 'Globe Points'
|
|
scene.add(groups.globePoints)
|
|
}
|
|
|
|
|
|
function addTracePoints(tracepoints) {
|
|
const mergedGeometry = new THREE.Geometry()
|
|
const pingGeometry = new THREE.SphereGeometry(1.9, 5, 5)
|
|
const material = new THREE.MeshBasicMaterial({
|
|
color: '#FF0000',
|
|
})
|
|
|
|
for (let point of tracepoints.points) {
|
|
const pos = convertLatLngToSphereCoords(point.x, point.y)
|
|
|
|
if (pos.x && pos.y && pos.z) {
|
|
pingGeometry.translate(pos.x, pos.y, pos.z)
|
|
mergedGeometry.merge(pingGeometry)
|
|
pingGeometry.translate(-pos.x, -pos.y, -pos.z)
|
|
}
|
|
}
|
|
|
|
const total = new THREE.Mesh(mergedGeometry, material)
|
|
groups.tracePoints = total
|
|
groups.tracePoints.name = 'Trace Points'
|
|
scene.add(groups.tracePoints)
|
|
groups.tracePoints.rotation.y = groups.globePoints.rotation.y - 0.05
|
|
}
|
|
|
|
init.addTracePoints = addTracePoints;
|
|
|
|
|
|
function convertLatLngToSphereCoords(latitude, longitude) {
|
|
const phi = (latitude * Math.PI) / 180
|
|
const theta = ((longitude - 180) * Math.PI) / 180
|
|
const x = -(globeRadius + -1) * Math.cos(phi) * Math.cos(theta)
|
|
const y = (globeRadius + -1) * Math.sin(phi)
|
|
const z = (globeRadius + -1) * Math.cos(phi) * Math.sin(theta)
|
|
return new THREE.Vector3(x, y, z)
|
|
}
|
|
|
|
function convertFlatCoordsToSphereCoords(x, y) {
|
|
let latitude = ((x - globeWidth) / globeWidth) * -180
|
|
let longitude = ((y - globeHeight) / globeHeight) * -90
|
|
latitude = (latitude * Math.PI) / 180 //(latitude / 180) * Math.PI
|
|
longitude = (longitude * Math.PI) / 180 //(longitude / 180) * Math.PI
|
|
const radius = Math.cos(longitude) * globeRadius
|
|
const targetX = Math.cos(latitude) * radius
|
|
const targetY = Math.sin(longitude) * globeRadius
|
|
const targetZ = Math.sin(latitude) * radius
|
|
return {
|
|
x: targetX,
|
|
y: targetY,
|
|
z: targetZ,
|
|
}
|
|
}
|
|
|
|
function convertLatLngToFlatCoords(latitude, longitude) {
|
|
const x = Math.round((longitude + 180) * (globeWidth / 360)) * 2
|
|
const y = Math.round((-1 * latitude + 90) * (globeHeight / 180)) * 2
|
|
return { x, y }
|
|
}
|
|
|
|
function getProjectedPosition(
|
|
width,
|
|
height,
|
|
position,
|
|
contentWidth,
|
|
contentHeight
|
|
) {
|
|
position = position.clone()
|
|
var projected = position.project(camera.object)
|
|
return {
|
|
x: projected.x * width + width - contentWidth / 2,
|
|
y: -(projected.y * height) + height - contentHeight - 10, // -10 for a small offset
|
|
}
|
|
}
|
|
|
|
function returnCameraAngles(x, y) {
|
|
let targetAzimuthalAngle = ((x - globeWidth) / globeWidth) * Math.PI
|
|
targetAzimuthalAngle = targetAzimuthalAngle + Math.PI / 2
|
|
targetAzimuthalAngle += 0.3
|
|
let targetPolarAngle = (y / (globeHeight * 2)) * Math.PI
|
|
targetPolarAngle += 0.1 // Add a small vertical offset
|
|
return {
|
|
azimuthal: targetAzimuthalAngle,
|
|
polar: targetPolarAngle,
|
|
}
|
|
}
|
|
|
|
function convertLatLngToSphereCoords(latitude, longitude) {
|
|
const phi = (latitude * Math.PI) / 180
|
|
const theta = ((longitude - 180) * Math.PI) / 180
|
|
const x = -(globeRadius + -1) * Math.cos(phi) * Math.cos(theta)
|
|
const y = (globeRadius + -1) * Math.sin(phi)
|
|
const z = (globeRadius + -1) * Math.cos(phi) * Math.sin(theta)
|
|
return new THREE.Vector3(x, y, z)
|
|
}
|
|
|
|
function easeInOutCubic(t) {
|
|
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
|
|
}
|
|
|
|
function getRandomNumberBetween(min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1) + min)
|
|
}
|
|
|
|
function setupOrbitControls() {
|
|
camera.orbitControls = new THREE.OrbitControls(camera.object, canvas)
|
|
camera.orbitControls.enableKeys = false
|
|
camera.orbitControls.enablePan = false
|
|
camera.orbitControls.enableZoom = false
|
|
camera.orbitControls.enableDamping = false
|
|
camera.orbitControls.enableRotate = false
|
|
camera.object.position.z = -550
|
|
camera.orbitControls.update()
|
|
}
|
|
|
|
function render() {
|
|
renderer.render(scene, camera.object)
|
|
requestAnimationFrame(render)
|
|
//animate()
|
|
groups.globePoints.rotation.y += 0.01
|
|
if (groups.tracePoints !== null) {
|
|
groups.tracePoints.rotation.y += 0.01
|
|
}
|
|
}
|
|
}
|
|
|