title: Three.js - Insert separate js file in HTML
body: <p>I am working with three.js right now and have a 3D cube rendered in HTML. The HTML code looks like this:</p>
  
  <pre><code>&lt;div id="render" class="center-block"&gt;
  
  &lt;script&gt;
  
  var camera;
  var scene;
  var renderer;
  var mesh;
  var geometry;
  var material1;
  var material2;
  var material3;
  var material4;
  var material5;
  var material6;
  var materials;
  var meshFaceMaterial;
  
  init();
  animate();
  
  function init() {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set( 0, 0, 0 );
  
      var light = new THREE.DirectionalLight( 0xffffff );
      light.position.set( 0, 1, 1 ).normalize();
      scene.add(light);
  
      geometry = new THREE.CubeGeometry( 10, 10, 10);
      material1 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') } );
      material2 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') } );
      material3 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') } );
      material4 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') } );
      material5 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') } );
      material6 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') } );
  
      materials = [material1, material2, material3, material4, material5, material6];
  
      meshFaceMaterial = new THREE.MeshFaceMaterial( materials );
  
      mesh = new THREE.Mesh(geometry, meshFaceMaterial );
      mesh.position.z = -50;
      scene.add( mesh );
  
      renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.getElementById('render').appendChild( renderer.domElement );
      window.addEventListener( 'resize', onWindowResize, false );
  
      render();
  }
  
  function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
      render();
  }
  
  function animate() {
      mesh.rotation.x += .016;
      mesh.rotation.y += .015;
      mesh.rotation.y += .014;
  
      render();
      requestAnimationFrame( animate );
  }
  
  function render() {
      renderer.render( scene, camera );
  }
  
  &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There is quite too much script. I want to make a separate .js file from that, but don't know how do accomplish it with three.js. Any suggestions?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>As I understand, the script works like a canvas tag, without entering the tag in HTML. This probably disturbs by making a separate .js file...</p>