import "./common/global_setting" ; import Curve from "./common/base/Curve" ; import Space from "./common/Space" ; const element = $ ( "#3d-space" ) [ 0 ] ; const space = new Space ( element , { orbit : true , } ) ; window . debugSpace = space ; const THREE = window . THREE ; space . createEmptyScene ( ) ; space . camera . position . set ( 69 , 88 , - 157 ) ; space . camera . rotation . set ( - 2.6 , 0.36 , 2.94 ) ; space . orbit . update ( ) ; function ef ( repeat ) { return ( input ) => { return ( repeat * input ) % 1 ; } ; } const globeRadius = 50 ; let globeWidth ; let globeHeight ; const state = { users : [ { id : 0 , name : "John Yang" , geo : { lat : 31.2304 , lng : 121.4737 , name : "Shanghai, CN" , } , date : "01.23.2018" , } , { id : 1 , name : "Emma S." , geo : { lat : 55.6761 , lng : 12.5683 , name : "Denmark, CPH" , } , date : "09.20.2018" , } , ] , } ; const canvas = window . canvasDebug = document . createElement ( "canvas" ) ; const ctx = window . ctxDebug = canvas . getContext ( "2d" ) ; const img1 = window . img1 = new Image ( ) ; img1 . onload = function ( ) { ctx . canvas . height = img1 . height ; ctx . canvas . width = img1 . width ; ctx . drawImage ( img1 , 0 , 0 ) ; globeWidth = ctx . canvas . width / 2 ; globeHeight = ctx . canvas . height / 2 ; state . users . forEach ( ( v ) => { const l = convertLatLngToFlatCoords ( v . geo . lat , v . geo . lng ) ; console . log ( "convertFlatCoordsToSphereCoords" , convertFlatCoordsToSphereCoords ( l . x , l . y ) ) ; console . log ( "convertLatLngToSphereCoords" , convertLatLngToSphereCoords ( v . geo . lat , v . geo . lng ) ) ; const circle = new Path2D ( ) ; circle . arc ( l . x , l . y , 3 , 0 , 2 * Math . PI ) ; ctx . fillStyle = "rgba(0,255,255,0.8)" ; ctx . fill ( circle ) ; } ) ; const texture = new THREE . CanvasTexture ( ctx . canvas ) ; const geometry = new THREE . SphereGeometry ( globeRadius , 32 , 32 ) ; const material = new THREE . MeshBasicMaterial ( { map : texture , transparent : true , side : THREE . DoubleSide , depthTest : false , depthWrite : false , } ) ; const sphere = new THREE . Mesh ( geometry , material ) ; space . scene . add ( sphere ) ; document . body . appendChild ( canvas ) ; const l1 = state . users [ 0 ] . geo ; const l2 = state . users [ 1 ] . geo ; const start1 = convertLatLngToSphereCoords ( l1 . lat , l1 . lng ) ; const start2 = convertLatLngToSphereCoords ( l2 . lat , l2 . lng ) ; const curve1 = new Curve ( space , start1 , start2 , { pointModel : true , pointSize : 0.8 } ) ; curve1 . colorEasing ( "#0000ff" , "#00ffff" , ef ( 3 ) ) ; setInterval ( ( ) => { curve1 . colorEasing ( "#0000ff" , "#00ffff" , ef ( 3 ) ) ; } , 2000 ) ; } ; img1 . src = "./static/images//global9.png" ; 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 ; longitude = ( longitude * Math . PI ) / 180 ; 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 ; console . log ( "convertLatLngToFlatCoords:" , latitude , longitude , x , y ) ; return { x , y } ; }