title: move a camera position around globe three.js
body: <p>Trying to reposition a camera on a three.js globe I have a list of countries that when clicked on return the country's lat and lon. I've checked these and am pretty sure thats what is being passed to the code below. So I click on the country and the camera moves to the new position, but it is inside the surface of the globe. Its under the correct country so I have to zoom out. This is the code I am using the radius of the globe is held in the var globeRadius (just in case that wasn't really obvious).</p>
  
  <pre><code>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));
  </code></pre>
  
  <p>I'm 'm guessing I have to incorporate the cameras height above the globe in some way. These are my initial camera settings</p>
  
  <pre><code>var FOV = 45;
    var NEAR = 2;
    var FAR = 4000;
  
    // setup a camera that points to the 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));
  </code></pre>
  
  <p>Do I need to add the width/height to the globalradius first for example. If anyone could tell me a nice transition method that would be helpful also, thanks</p>