var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.setScalar(20);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor(0x404040);
var canvas = renderer.domElement;
document.body.appendChild(canvas);

//var controls = new THREE.OrbitControls(camera, renderer.domElement);
const radius = 10;
//THIS IS HOROSHO
function convert(coord={
  lat:8.442042,
  lon:77.148370,
}){
  const parisSpherical = {
    lat: THREE.Math.degToRad(90 - coord.lat),
    lon: THREE.Math.degToRad(coord.lon)
  };
  const radius = 10;
  const vector = new THREE.Vector3().setFromSphericalCoords(
    radius,
    parisSpherical.lat,
    parisSpherical.lon
  );
  console.log(vector)
  return vector
}
// \ THIS IS HOROSHO

// check we did it correctly
//var spherical = new THREE.Spherical().setFromVector3(parisVector);
//console.log(spherical);
////////////////////////////

var texLoader = new THREE.TextureLoader();
texLoader.setCrossOrigin("anonymous");
var tex = texLoader.load(
      "https://cywarr.github.io/small-shop/map-political1.gif"
    );
var globe = new THREE.Mesh(
  new THREE.SphereGeometry(radius, 18, 9),
  new THREE.MeshBasicMaterial({
    map: tex,
    transparent: true,
    opacity: 0.25
  })
);
globe.geometry.rotateY(-Math.PI * 0.5);
scene.add(globe);

//HOW TO USE
var lineGeom = new THREE.BufferGeometry().setFromPoints([
  convert({lat:-50.606498,lon:-70.9632}),
  convert(),
]);

var line = new THREE.Line(
  lineGeom,
  new THREE.LineBasicMaterial({ color: "yellow" })
);
globe.add(line);

render();

function resize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render() {
  if (resize(renderer)) {
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}