THREE-template.js

let renderer, camera, controls, scene,
    width = window.innerWidth,
    height = window.innerHeight;

init();
animate();
render();

function init() {
  // RENDERER
  renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('canvas'),
    antialias: true,
  });
  renderer.setClearColor(0x111111);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
 
  // CAMERA
  camera = new THREE.PerspectiveCamera(
    70,
    width / height,
    1,
    1000
  );
  camera.position.z = 100;
  
  // CONTROLS
  controls = new THREE.TrackBallControls(camera);
  controls.addEventListener('change', render);
  
  // SCENE
  scene = new THREE.Scene();
  
  // Light
  const light1 = new THREE.AmbientLight(0xFFFFFF, 0.5),
        light2 = new THREE.DirectionalLight(0xFFFFFF);
  
  light2.position.set(1, 1, 1);
  
  scene.add(light1);
  scene.add(light2);
  
  // Window
  window.addEventListener('resize', onWindowResize, false);
}

function animate() {
  requestAnimationFrame(animate);
  controls.update();
}

function render() {
  renderer.render(scene, camera);
}

function onWindowResize() {
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
  controls.handleResize();
}