Three.js Starting setup

three_js_starting.js

(function() {
  var camera, scene, renderer, geometry, material, mesh;

  init();
  animate();

  function init () {

      initScene();
      initCamera();
      initObjects();
      initRenderer();
    
      document.body.appendChild( renderer.domElement );
  }

  function animate () {
      requestAnimationFrame( animate );
      render();

  }

  function render () {

      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;

      renderer.render( scene, camera );
  }

  function initScene () {
    scene = new THREE.Scene();
  }

  function initCamera () {
      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
      camera.position.z = 1000;
      scene.add( camera );
  }

  function initObjects () {
    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
  }

  function initRenderer () {
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }

})();