title: three.js skybox: obvious corners and lots of distortion
body: <p>Today I've been experimenting with building my first ever skybox in three.js. I've read a lot of tutorials and the code I've ended up with is based on this one: <a href="http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/" rel="nofollow noreferrer">http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/</a>
  I did make a few changes in order to allow for the images to load first, and to make it compatible with the version of three.js which I am using.</p>
  
  <p>I've overcome a lot of small problems to get to the point I am currently at, but cannot find any answer to my current issue despite having searched quite hard. My problem is that despite using purpose-built skybox textures downloaded from the internet, it is glaringly obvious that my skybox is a cube with corners and edges. The textures appear heavily distorted and are not at all convincing. </p>
  
  <p>Here is a screenshot of how my skybox looks:
  <img src="https://i.imgur.com/56FjHcY.png" alt="Here is a screenshot of my skybox"></p>
  
  <p>And here is a link to the site from which I downloaded the images:
  <a href="http://www.humus.name/index.php?page=Cubemap&amp;item=Yokohama3" rel="nofollow noreferrer">http://www.humus.name/index.php?page=Cubemap&amp;item=Yokohama3</a>
  As you can see, in their preview it looks much better.</p>
  
  <p>I've tried this with a few different downloaded textures and every time it is very obvious that you are looking at the inside of a cube.</p>
  
  <p>Here's my code (I'm including all my code, not just the section which creates the skybox):</p>
  
  <pre><code>    var scene;
      var camera;
      var renderer;
  
      function createRenderer () {
          renderer = new THREE.WebGLRenderer();
          renderer.setClearColor(0x000000, 1.0)
          renderer.setSize(window.innerWidth, window.innerHeight)
          renderer.shadowMapEnabled = true;
          //renderer.shadowCameraNear = 0.5;
          //renderer.shadowCameraFar = 500;
      }
  
      function createCamera () {
          camera = new THREE.PerspectiveCamera(
              45, 
              window.innerWidth/window.innerHeight,
              0.1, 1000
          );
          camera.position.x = 50;
          camera.position.y = 30;
          camera.position.z = 40;
          camera.lookAt(scene.position);
      }
  
      function createPlane () {
          var material = new THREE.MeshLambertMaterial({
              color: 0xcccccc,
          })
          var geometry = new THREE.PlaneGeometry(40, 40)
  
          var plane = new THREE.Mesh(geometry, material)
          plane.receiveShadow = true;
          plane.rotation.x = -Math.PI/2
          plane.position.y = -6;
          scene.add(plane)
      }
  
      function createLight () {
          var spotLight = new THREE.DirectionalLight(0xffffff);
          spotLight.position.set( 0, 50, 20 );
          spotLight.shadowCameraVisible = true;
          spotLight.shadowDarkness = 0.5
          spotLight.shadowCameraNear = 0;
          spotLight.shadowCameraFar = 100;
          spotLight.shadowCameraLeft = -50;
          spotLight.shadowCameraRight = 50;
          spotLight.shadowCameraTop = 50;
          spotLight.shadowCameraBottom = -50;
          spotLight.castShadow = true;
          scene.add(spotLight);
      }
  
      function createSkyboxAndSphere () { 
  
          var urlPrefix = "Yokohama3/";
          var urls = [ urlPrefix + "posx.jpg", urlPrefix + "negx.jpg",
              urlPrefix + "posy.jpg", urlPrefix + "negy.jpg",
              urlPrefix + "posz.jpg", urlPrefix + "negz.jpg" ];
          var textureCube = THREE.ImageUtils.loadTextureCube( urls , undefined, function () {;
  
              var shader = THREE.ShaderLib["cube"];
              var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
              shader.uniforms['tCube'].value = textureCube;   // textureCube has been init before
              var material = new THREE.ShaderMaterial({
                  fragmentShader    : shader.fragmentShader,
                  vertexShader  : shader.vertexShader,
                  uniforms  : shader.uniforms,
                  depthWrite : false,
                  side: THREE.BackSide,
              });
  
  
              var geometry = new THREE.BoxGeometry(100, 100, 100)
              var skybox = new THREE.Mesh(geometry, material)
              scene.add(skybox)
  
  
              var material = new THREE.MeshPhongMaterial({
                  color: "red",
                  envMap: textureCube,
                  reflectivity: 0.3,
              })
              var geometry = new THREE.SphereGeometry(6, 30, 15)
  
              var sphere = new THREE.Mesh(geometry, material)
              sphere.castShadow = true;
              sphere.receiveShadow = true;
              scene.add(sphere)
  
              });
      }
  
      function init () {
  
          scene = new THREE.Scene();
          createRenderer();
          createCamera();
          createLight();
          createPlane ();
          createSkyboxAndSphere ();
  
          document.getElementById("container").appendChild(renderer.domElement)
  
          render ()
      }
  
      function render () {
          renderer.render(scene, camera)
          requestAnimationFrame(render);
      }
  
      window.onload = function () {
          init ();
      }
  </code></pre>
  
  <p>I suspect I am fundamentally misunderstanding something about how cubemapping and skyboxes work - I am very new to this in particular and javascript in general and am aware of huge gaps in my knowledge.</p>
  
  <p>My apologies if the answer to this is obvious and/or the question has been asked before, and a pre-emptive thanks for your help!</p>