Tree.js

map.js

var container;
var camera, scene, renderer;
var group;
var radius = 200;
var mouseX = 0, mouseY = 0;

var width = 700;
var height = 700;

var windowHalfX = width / 2;
var windowHalfY = height / 2;

init();
animate();

// convert the positions from a lat, lon to a position on a sphere.
function latLongToVector3(lat, lon, radius) {
    var phi = (lat)*Math.PI/180;
    var theta = (lon-180)*Math.PI/180;
    var x = -(radius) * Math.cos(phi) * Math.cos(theta);
    var y = (radius) * Math.sin(phi);
    var z = (radius) * Math.cos(phi) * Math.sin(theta);
    return [x,y,z]
}

function init() {
  container = document.getElementById('map');

  camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000 );
  camera.position.z = 500;

  scene = new THREE.Scene();

  group = new THREE.Object3D();
  scene.add(group);

  // earth
  var earthTexture = new THREE.Texture();
  var loader = new THREE.ImageLoader();

  loader.addEventListener( 'load', function ( event ) {
    earthTexture.image = event.content;
    earthTexture.needsUpdate = true;
  } );

  loader.load('images/NE.jpg');

  var geometry = new THREE.SphereGeometry( radius, 32, 32 ); // radius, widthSegments, heightSegments,
  var material = new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } );

  var mesh = new THREE.Mesh( geometry, material );
  group.add(mesh);

  // -----------------------------------------------
  var sp = new THREE.SphereGeometry(2); // radius, widthSegments, heightSegments
  var lat = 16.72;
  var lon =  -62.18;
  var xyz = latLongToVector3(lat, lon, radius);

  var mat = new THREE.MeshBasicMaterial({
    color: 0xFF0000
  });

  s = new THREE.Mesh( sp, mat );
  s.position.set( xyz[0], xyz[1], xyz[2] );
  group.add(s);
  // -----------------------------------------------

  renderer = new THREE.CanvasRenderer();
  renderer.setSize( width, height );

  container.appendChild( renderer.domElement );
  
  // document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
  windowHalfX = width / 2;
  windowHalfY = height / 2;

  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  renderer.setSize( width, height );
}

function onDocumentMouseMove( event ) {
  mouseX = ( event.clientX - windowHalfX );
  mouseY = ( event.clientY - windowHalfY );
}

function animate() {
  requestAnimationFrame( animate );
  render();
}

function render() {
  camera.position.x += ( mouseX - camera.position.x ) * 0.05;
  camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
  camera.lookAt( scene.position );

  group.rotation.y -= 0.005;
  renderer.render( scene, camera );
}