/***********************************
Automatically set the camera vertical FOV so that there's always a square area visible in the centre of the viewport, regardless of size and dimensions (the red square is just to show it works)
***********************************/

Math.degrees = function(radians) {
  return radians * 180 / Math.PI;
};

(function() {
  'use strict';

  //setup canvas, renderer
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});


  //setup camera - camera defaults to looking down -Z axis with +Y up
  const fov = 90;         //not much point in setting this as gets overridden by setFOV
  const aspect = 1;       //not much point in setting this as gets overridden by setFOV
  const near = 0.1;
  const far = 5;
  const cameraDistance = 4;       //has to be less than far
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  const worldSize = 10;         //this is the size in units of the square area that gets kept central
  camera.position.z = cameraDistance;


  //setup scene
  const scene = new THREE.Scene();


  //setup plane mesh
  const plane_dim = worldSize;        //to visualise the worldsize
  const plane_geom = new THREE.PlaneGeometry(plane_dim, plane_dim);

  const plane_mat = new THREE.MeshPhongMaterial({
    color: 0xFF0000
  });

  const plane_mesh = new THREE.Mesh(plane_geom, plane_mat);

  scene.add(plane_mesh);


  //setup one light
  const light_color = 0xFFFFFF;
  const light_intensity = 1;
  const light = new THREE.DirectionalLight(light_color, light_intensity);
  light.position.set(-1, 2, 3);
  scene.add(light);


  //rendering
  function resizeRendererToDisplaySize() {
    const canvas = renderer.domElement;
    const pixelRatio = window.devicePixelRatio;
    const width = canvas.clientWidth * pixelRatio | 0;       //CSS width of canvas
    const height = canvas.clientHeight * pixelRatio | 0;     //CSS height of canvas
    const needResize = canvas.width !== width || canvas.height !== height;      //drawingbuffer width/height of canvas

    if (needResize) {
      //changes the canvas size
      renderer.setSize(width, height, false);
    }

    return needResize;
  }


  function setFOV() {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;

    if (camera.aspect < 1) {
      const vFOV = 2 * Math.atan((worldSize / camera.aspect) / (2 * cameraDistance));
      camera.fov = Math.degrees(vFOV);
    } else {
      const vFOV = 2 * Math.atan(worldSize / ( 2 * cameraDistance));
      camera.fov = Math.degrees(vFOV);
    }

    camera.updateProjectionMatrix();
  }


  //the time var is automatically passed in (can be called anything BTW)
  function render(time) {
    time *=0.001;     //convert time to seconds

    if (resizeRendererToDisplaySize()) {
      setFOV();
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  setFOV();
  requestAnimationFrame(render);


})();