javascript - Three.js Globe camera tweening on button click -

im trying tween camera movement 1 place can't seem work out. im using globe chrome experiments , added function on it

  function changecountry(lat,lng){ var phi = (90 - lat) * math.pi / 180; var theta = (180 - lng) * math.pi / 180; var = {     x : camera.position.x,     y : camera.position.y,     z : distance   };    var = {     posx : 200 * math.sin(phi) * math.cos(theta),     posy : 200 * math.cos(phi),     posz : distance   };   var tween = new tween.tween(from)   .to(to,2000)   .easing(tween.easing.linear.none)   .onupdate(function () {     camera.position.set(this.x, this.y, this.z);     camera.lookat(new three.vector3(0,0,0));   })   .oncomplete(function () {     camera.lookat(new three.vector3(0,0,0));   })   .start();   console.log(to,from,lat,lng);} 

i've console printed values , works getting lat&long , converting them right values, x,y,z values great don't move camera @ all. in console errors: uncaught typeerror: n not function, 90tween.js:4 uncaught typeerror: not function& 419tween.js:4 uncaught typeerror: not function , last endlessly counts ++.

if can me sort out lot of help.

edit: fixed error replacing .easing(tween.easing.linear.none) .easing(tween.easing.linear.easenone) . camera irregular movement - same , goes normal position before animation. when playing tween.update() in render() function different results none of them works should. render() function this:

zoom(curzoomspeed);  rotation.x += (target.x - rotation.x) * 0.1; rotation.y += (target.y - rotation.y) * 0.1;   distance += (distancetarget - distance) * 0.3;  camera.position.x = distance * math.sin(rotation.x) * math.cos(rotation.y); camera.position.y = distance * math.sin(rotation.y); camera.position.z = distance * math.cos(rotation.x) * math.cos(rotation.y);  camera.lookat(mesh.position);  tween.update(); renderer.render(scene, camera); 

it looks bit odd doing. me works quite , looks more simple:

var newpos = new three.vector3( /* new values */ ); new tween.tween(camera.position)     .to(newpos, 500)     .easing(tween.easing.quadratic.inout)     .start(); 

the update in render() function just

tween.update(); camera.lookat(mesh.position); 

the problem if new position @ opposite side of globe, camera tween through globe doesn't nice. so, maybe it's better put camera object3d , tween rotation of object. working lat , lng anyway, should easier work angles in general.

camera.position.set(0,0,distance); camera.lookat(new three.vector3(0,0,0)); var camobject = new three.object3d(); camobject.add(camera);   // camera.lookat shouldn't needed anymore within render()  ...  var phi = (90 - lat) * math.pi / 180; var theta = (180 - lng) * math.pi / 180;  var euler = new three.euler(phi, theta, 0, 'xyz'); var newq = new three.quaternion().setfromeuler(euler);  new tween.tween(camobject.quaternion)     .to(newq, 500)     .easing(tween.easing.quadratic.inout)     .start(); 

i didn't test idea, there wrong (e.g. how , in order define new angles). want give hints.