Working with latitude and attitude points involves calculating phi and theta in the following manner:
var phi = (90 - varible1) * Math.PI / 180;
var theta = (-variable2) * Math.PI / 180;
var RandomHeightOfLine = 1.5 // Choose a value greater than the distance of your point to the origin
For Vector calculations:
new THREE.Vector3(RandomHeightOfLine * Math.sin(phi) * Math.cos(theta), RandomHeightOfLine * Math.cos(phi), RandomHeightOfLine * Math.sin(phi) * Math.sin(theta)));
For Point calculations:
var x = RandomHeightOfLine * Math.sin(phi) * Math.cos(theta);
var y = RandomHeightOfLine * Math.cos(phi);
var z = RandomHeightOfLine * Math.sin(phi) * Math.sin(theta);
controls.target.set( x, y, z );
To move the camera as well, consider calculating x2, y2, z2 with a greater RandomHeightOfLine.
For smooth movements, it's recommended to use TWEEN:
var t;
var t2;
var t3; // Make them Global or use Array to prevent GC from removing Tween objects.
function tweenCamera(position, target, time){
console.log("tween");
updateTween = true;
beforeTweenPos = camera.position.clone();
beforeTweenTarg = controls.target.clone();
t = new TWEEN.Tween( camera.position ).to( {
x: position.x,
y: position.y,
z: position.z}, time )
.easing( TWEEN.Easing.Quadratic.In).start();
t2 = new TWEEN.Tween( camera.up ).to( {
x: 0,
y: 1,
z: 0}, time )
.easing( TWEEN.Easing.Quadratic.In).start();
t3 = new TWEEN.Tween( controls.target ).to( {
x: target.x,
y: target.y,
z: target.z}, time )
.easing( TWEEN.Easing.Quadratic.In)
.onComplete(function () {
updateTween = false;
console.log("Turning off Update Tween");
t = null;
t2 = null;
t3 = null;
}, this).start();
//camera.up = new THREE.Vector3(0,0,1); // Turn off animation for camera.up if not needed and remove t3.
}
Ensure to update your animation as follows:
...
lastTimeMsec = lastTimeMsec || nowMsec-1000/60;
deltaMsec = Math.min(200, nowMsec - lastTimeMsec);
lastTimeMsec = nowMsec;
if(updateTween)
{
TWEEN.update(lastTimeMsec); //Comment
} else {
TWEEN.removeAll();
}
...
For Tween JS library, visit: