lat = lat * Math.PI / 180.0;

  lon = -lon * Math.PI / 180.0;

  return new THREE.Vector3(

    Math.cos(lat) * Math.cos(lon),

    Math.sin(lat),

    Math.cos(lat) * Math.sin(lon));

}

​

function Earth(radius, texture) {

  THREE.Object3D.call(this);

​

  this.userData.radius = radius;

​

  var earth = new THREE.Mesh(

    new THREE.SphereBufferGeometry(radius, 64.0, 48.0),

    new THREE.MeshPhongMaterial({

      map: texture

    })

  );

​

  this.add(earth);

}

​

Earth.prototype = Object.create(THREE.Object3D.prototype);

​

var scene, camera, renderer, label;

var controls;

​

init();

​

function init() {

  scene = new THREE.Scene();

​

  camera = new THREE.PerspectiveCamera(45, 4 / 3, 0.1, 100);

  camera.position.set(0.0, 1.5, 3.0);

​

  renderer = new THREE.WebGLRenderer({

    antialias: true

  });

​

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  controls.autoRotate = true;

  controls.autoRotateSpeed = .5;

  controls.enablePan = false;

​

  var ambient = new THREE.AmbientLight(0xffffff, 0.5);

  scene.add(ambient);

​

  var direcitonal = new THREE.DirectionalLight(0xffffff, 0.5);

  direcitonal.position.set(5.0, 2.0, 5.0).normalize();

  scene.add(direcitonal);

​

  // just some code for the loading

  var manager = createLoader(renderer.domElement, animate);

​

  var texLoader = new THREE.TextureLoader(manager).setCrossOrigin(true);

​

  var texture = texLoader.load('https://s3-eu-west-2.amazonaws.com/bckld/lab/textures/earth_latlon.jpg');

  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

​

  var earth = new Earth(1.0, texture);

​

  scene.add(earth);

​

  //-------------

  // globe

​

  var radius1 = 1;

​

  var sphere1 = new THREE.Mesh(new THREE.SphereGeometry(radius1, 16, 16));

  scene.add( sphere1 );

  window.onmousedown = function( event ) 

{

  // the following line would stop any other event handler from firing

  // (such as the mouse's TrackballControls)

  // event.preventDefault();

  const rect = renderer.domElement.getBoundingClientRect();

  const left = event.clientX - rect.left;

  const top = event.clientY - rect.top;

​

  const x = (left / rect.width) * 2 - 1;

  const y = - (top / rect.height) * 2 + 1;

  // This code can be kept, but to keep it this clear, it's best to eliminate

  const raycaster = new THREE.Raycaster();

  raycaster.ray.origin.setFromMatrixPosition(camera.matrixWorld);

  raycaster.ray.direction.set(x, y, 0.5).unproject(camera).sub(raycaster.ray.origin).normalize();

  const intersects = raycaster.intersectObjects(markerarry, true);

  console.log(intersects);

​

}

  //-----------------------

​

  window.addEventListener('resize', onResize);

  onResize();

​

  document.body.appendChild(renderer.domElement);

}

​

​

function onResize() {

  camera.aspect = window.innerWidth / window.innerHeight;

  camera.updateProjectionMatrix();

​

  renderer.setSize(window.innerWidth, window.innerHeight);

}

​

function animate() {

  //  label.update();

​

  requestAnimationFrame(animate);

​

  controls.update();

​

  renderer.render(scene, camera);

}