move a camera position around globe three.js -
trying reposition camera on three.js globe have list of countries when clicked on return country's lat , lon. i've checked these , pretty sure thats being passed code below. click on country , camera moves new position, inside surface of globe. under correct country have zoom out. code using radius of globe held in var globeradius (just in case wasn't obvious).
console.log(cameratarget[0].lat,cameratarget[0].lon) var phi = cameratarget[0].lat * math.pi / 180; var theta = (cameratarget[0].lon + 90) * math.pi / 180; posx = globeradius * math.cos(phi) * math.sin(theta); posy = globeradius * math.sin(phi); posz = globeradius * math.cos(phi) * math.cos(theta); camera.position.set(posx,posy,posz); camera.lookat(new three.vector3(0,0,0));
i'm 'm guessing have incorporate cameras height above globe in way. these initial camera settings
var fov = 45; var near = 2; var far = 4000; // setup camera points center var camera = new three.perspectivecamera(fov,width/height,near,far); camera.position.set(posx,posy,posz); camera.lookat(new three.vector3(0,0,0));
do need add width/height globalradius first example. if tell me nice transition method helpful also, thanks
here idea basic smooth rotation+zoom transition. having function parameters setup:
let perf: performance = window.performance; // init other necessary variables var inittransition = function (longitude, latitude, animationtime, radius) { begintime = perf.now(); animtime = animationtime * 1000; beginphi = config.phi; beginthetta = config.thetta; beginzoomradius = config.zoomradius; targetphi = latitude * math.pi / 180; targetthetta = (longitude + 90) * math.pi / 180; targetzoomradius = radius; needstransitionanim = true; }
perform in update loop:
update() { /* stuff */ computecurrentcamerapos(); setcameraposfromconfig(); }
where computecurrentcamerapos is:
var computecurrentcamerapos = function() { if (needstransitionanim) { t = (perf.now() - begintime) / speedtime; if (t > 1) { t = 1; needstransitionanim = false; } config.phi = blendfunc (beginphi, targetphi, t); config.thetta = blendfunc (beginthetta, targetthetta, t); config.zoomradius = blendfunc (beginzoomradius, targetzoomradius, t); } }
and setcameraposfromconfig self-explanatory. blendfunc(a, b, t) might whatever interpolation function (here got t in [0,1] , expect value in [a,b]).
keep in mind, considering orientation closest way a 2*m_pi - a lays through 0 if a < m_pi/2, example needs modified.
Comments
Post a Comment