title: comparing methods of creating skybox material in three.js
body: <p>When it comes to making skyboxes in three.js, I have seen two different schools of thought. Assuming that we have the code</p>
  
  <pre><code>var imagePrefix = "images/mountains-";
  var directions  = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
  var imageSuffix = ".jpg";
  var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );    
  </code></pre>
  
  <p>In both methods, one creates a really big cube and applies textures. The difference is whether shaders are used. For example:</p>
  
  <p>Material without using shader:</p>
  
  <pre><code>var materialArray = [];
  for (var i = 0; i &lt; 6; i++)
      materialArray.push( new THREE.MeshBasicMaterial({
          map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
          side: THREE.BackSide
      }));
  var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
  var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
  scene.add( skyBox );
  </code></pre>
  
  <p>Material using shader:</p>
  
  <pre><code>var imageURLs = [];
  for (var i = 0; i &lt; 6; i++)
      imageURLs.push( imagePrefix + directions[i] + imageSuffix );
  var textureCube = THREE.ImageUtils.loadTextureCube( imageURLs );
  var shader = THREE.ShaderLib[ "cube" ];
  shader.uniforms[ "tCube" ].value = textureCube;
  var skyMaterial = new THREE.ShaderMaterial( {
      fragmentShader: shader.fragmentShader,
      vertexShader: shader.vertexShader,
      uniforms: shader.uniforms,
      depthWrite: false,
      side: THREE.BackSide
  } );
  var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
  scene.add( skyBox );
  </code></pre>
  
  <p>My own informal performance tests show no significant difference in FPS using 2048x2048 images for textures. The shader-free code is easier (at least for me) to understand. Are there situations in which there is an advantage to using the shader-based texture?</p>