threejs boilerplate

cities.js

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

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

function addShapes() {
  let num = 20,
      distance = 10,
      offset = 30;

  for (let i = 0; i < num; i++) {
    for (let j = 0; j < num; j++) {
      
      let geometry = new THREE.BoxGeometry(10, totesRando(25, 75), 10),
          color = new THREE.Color(`hsl(${totesRando(180, 210)}, 50%, 50%)`)
          material = new THREE.MeshLambertMaterial({
            color
          }),
          mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = distance * i
      mesh.position.z = distance * j - offset
      
      scene.add(mesh);
    }
  }
  
  // Bye, lumpy ball :(
  // let geo2 = new THREE.DodecahedronGeometry(10, 1),
  //     mat2 = new THREE.MeshToonMaterial({ color: 0x663399 })
  // let mesh2 = new THREE.Mesh(geo2, mat2)
  // scene.add(mesh2)
}

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;
  camera.position.y = 50
  camera.position.x = 50
  
  // CONTROLS
  controls = new THREE.TrackballControls(camera);
  controls.addEventListener('change', render);
  
  // SCENE
  scene = new THREE.Scene();
  
  // LIGHTS
  const light1 = new THREE.AmbientLight(0xFFFFFF, 0.5),
        light2 = new THREE.DirectionalLight(0xFFFFFF);
  
  light2.position.set(10, 5, 40);
  
  scene.add(light1)
  scene.add(light2)
  
  // window resize
  window.addEventListener('resize', onWindowResize, false)
}

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

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

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  controls.handleResize()
}

// HELPERS
function totesRando(min, max) {
  return Math.random() * (max - min) + min
}

final.js

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

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

function addShapes() {
  let num = 30,
      distance = 10,
      offset = 30;

  for (let i = 0; i < num; i++) {
    for (let j = 0; j < num; j++) {
      
      let geometry = new THREE.BoxGeometry(10, totesRando(25, 75), 10),
          color = new THREE.Color(`hsl(${totesRando(150, 210)}, 50%, 50%)`)
          material = new THREE.MeshLambertMaterial({ color }),
          mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = distance * i
      mesh.position.z = distance * j - offset
      
      scene.add(mesh);
    }
  }
  
  // HI lumpy ball!
  let geo2 = new THREE.DodecahedronGeometry(10, 1),
      mat2 = new THREE.MeshToonMaterial({ color: 0xffff00 })
  let mesh2 = new THREE.Mesh(geo2, mat2)
  
  mesh2.position.y = 150
  scene.add(mesh2)
}

function init() {
  // RENDERER
  renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('canvas'),
    antialias: true
  })
  renderer.setClearColor(0x2F8E76);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  
  // CAMERA
  camera = new THREE.PerspectiveCamera(
    70,
    width / height,
    1,
    1000
  )
  camera.position.z = 30;
  camera.position.y = 50
  camera.position.x = 50
  
  // CONTROLS
  controls = new THREE.TrackballControls(camera);
  controls.addEventListener('change', render);
  
  // SCENE
  scene = new THREE.Scene();
  
  // LIGHTS
  const light1 = new THREE.AmbientLight(0xFFFFFF, 0.5),
        light2 = new THREE.DirectionalLight(0xFFFFFF);
  
  light2.position.set(10, 5, 40);
  
  scene.add(light1)
  scene.add(light2)
  
  // window resize
  window.addEventListener('resize', onWindowResize, false)
}

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

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

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  controls.handleResize()
}

// HELPERS
function totesRando(min, max) {
  return Math.random() * (max - min) + min
}

three.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();
  
  // LIGHTS
  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 resize
  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()
}