Latitude and longitude of camera

by holgerl

HTML

<script src="https://threejs.org/build/three.min.js"></script>

Latitude: <span id="longitude">X</span> <br/> 
Longitude: <span id="latitude">X</span>

JavaScript

var camera, scene, renderer, geometry, material, mesh, startTime, renderWidth, renderHeigth;

// Thanks to @WestLangley for performance suggestions

var dir = new THREE.Vector3();
var groundProjection = new THREE.Vector3();

init();
animate();

function init() {
  startTime = new Date().getTime();
  renderWidth = window.innerWidth;
  renderHeight = window.innerHeight;

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, renderWidth / renderHeight, 0.1, 10000);
  scene.add(camera);

  geometry = new THREE.TorusGeometry(1, 0.2, 20, 20);
  material = new THREE.MeshNormalMaterial();
  mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 1, 0)
  scene.add(mesh);
  
  geometry = new THREE.SphereGeometry(0.5, 0.5, 10, 20);
  material = new THREE.MeshNormalMaterial();
  mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, 1)
  scene.add(mesh);
  
  geometry = new THREE.PlaneGeometry(3, 3, 5, 5);
  material = new THREE.MeshBasicMaterial({wireframe: true});
  mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.set(Math.PI/2, 0, 0)
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(renderWidth, renderHeight);

  document.body.appendChild(renderer.domElement);
}

function animate() {
  requestAnimationFrame(animate);

  var time = (new Date().getTime() - startTime) / 1000;

  var speed = 0.6;
  var cameraRadius = 6;

  // Rotate camera:
  camera.position.set(
      Math.sin( time * speed ), 
      Math.sin( time * speed / 2 ), 
      Math.cos( time * speed )
    ).multiplyScalar( cameraRadius );
  camera.lookAt( scene.position );
  
  dir = camera.getWorldDirection( dir );
  groundProjection = camera.getWorldDirection( groundProjection ).projectOnPlane( scene.up );
  var longitudeRadians = Math.atan2(groundProjection.x, groundProjection.z);
  var latitudeRadians = Math.atan2(groundProjection.length(), dir.y)
  
  // longitudeRadians is an angle between -3.14 and 3.14
  // latitudeRadians is...