title: THREE.js SkyBox
body: <p>I want to create a SkyBox in THREE.js, already found a few tipps how to create it, but it doesnt work. I tried all of them but nothing works. The Filepaths and Imagepaths are right.</p>
  
  <p>Can Someone explain whats wrong with the code and why the skybox doesnt appear?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Earth&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;style&gt;
              body {
                  margin: 0px;
                  background-color: #000000;
                  overflow: hidden;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;script src="../js/three.min.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
  
              var camera, scene, renderer;
              var mirrorCube, mirrorCubeCamera; // for mirror material
              var mirrorSphere, mirrorSphereCamera; // for mirror material
  
              init();
              animate();
  
              function init() {
                  renderer = new THREE.WebGLRenderer();
                  renderer.setPixelRatio( window.devicePixelRatio );
                  renderer.setSize( window.innerWidth, window.innerHeight );
                  document.body.appendChild( renderer.domElement );
  
                  scene = new THREE.Scene();
                  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                  scene.add(camera);
                  camera.position.set(0,150,400);
                  camera.lookAt(scene.position);  
  
                  var sides  = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'];
                  var scCube = THREE.ImageUtils.loadTexture(sides);
                  scCube.format = THREE.RGBFormat;
  
                  var skyShader = THREE.ShaderLib["cube"];
                  skyShader.uniform["tCube"].value = scCube;
                  var skyMaterial = new THREE.ShaderMaterial( {
                      fragmentShader: skyShader.fragmentShader, vertexShader: skyShader.vertexShader,
                      uniforms: skyShader.uniforms, depthWrite: false, side: THREE.BackSide
                  });
  
                  var skyBox = new THREE.Mesh(new THREE.CubeGeometry(500, 500, 500), skyMaterial);
                  skyMaterial.needsUpdate = true;
  
                  scene.add(skyBox);  
              }
  
              function render() 
              {
                  mirrorSphere.visible = false;
                  mirrorSphereCamera.updateCubeMap( renderer, scene );
                  mirrorSphere.visible = true;
  
                  renderer.render( scene, camera );
              }
  
              function onWindowResize() {
                  camera.aspect = window.innerWidth / window.innerHeight;
                  camera.updateProjectionMatrix();
                  renderer.setSize( window.innerWidth, window.innerHeight );
              }
  
              function animate() {
                  requestAnimationFrame( animate );
                  render();
                  renderer.render( scene, camera );
              }
  
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>