Last active
August 28, 2019 09:51
-
-
Save zhaocnus/05b261876afa17c720fbc529ef586180 to your computer and use it in GitHub Desktop.
webgl-globe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as THREE from 'three'; | |
| import { geoInterpolate } from 'd3-geo'; | |
| const GLOBE_RADIUS = 200; | |
| const CURVE_MIN_ALTITUDE = 20; | |
| const CURVE_MAX_ALTITUDE = 200; | |
| const DEGREE_TO_RADIAN = Math.PI / 180; | |
| export function clamp(num, min, max) { | |
| return num <= min ? min : (num >= max ? max : num); | |
| } | |
| // util function to convert lat/lng to 3D point on globe | |
| export function coordinateToPosition(lat, lng, radius) { | |
| const phi = (90 - lat) * DEGREE_TO_RADIAN; | |
| const theta = (lng + 180) * DEGREE_TO_RADIAN; | |
| return new THREE.Vector3( | |
| - radius * Math.sin(phi) * Math.cos(theta), | |
| radius * Math.cos(phi), | |
| radius * Math.sin(phi) * Math.sin(theta) | |
| ); | |
| } | |
| export function getSplineFromCoords(coords) { | |
| const startLat = coords[0]; | |
| const startLng = coords[1]; | |
| const endLat = coords[2]; | |
| const endLng = coords[3]; | |
| // start and end points | |
| const start = coordinateToPosition(startLat, startLng, GLOBE_RADIUS); | |
| const end = coordinateToPosition(endLat, endLng, GLOBE_RADIUS); | |
| // altitude | |
| const altitude = clamp(start.distanceTo(end) * .75, CURVE_MIN_ALTITUDE, CURVE_MAX_ALTITUDE); | |
| // 2 control points | |
| const interpolate = geoInterpolate([startLng, startLat], [endLng, endLat]); | |
| const midCoord1 = interpolate(0.25); | |
| const midCoord2 = interpolate(0.75); | |
| const mid1 = coordinateToPosition(midCoord1[1], midCoord1[0], GLOBE_RADIUS + altitude); | |
| const mid2 = coordinateToPosition(midCoord2[1], midCoord2[0], GLOBE_RADIUS + altitude); | |
| return { | |
| start, | |
| end, | |
| spline: new THREE.CubicBezierCurve3(start, mid1, mid2, end) | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment