three.js skybox assigned to camera

Question

I'm trying to make skybox assigned to player camera. When camera moves(also skybox moves with it), texture get stretched. How to get rid of this?

Code:

var textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderUtils.lib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;

cubematerial = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    side: THREE.BackSide
});
skyBox = new THREE.Mesh(new THREE.CubeGeometry(1000,1000,1000), cubematerial);
camera.add(skyBox);

Answer 1

So, after digging into Three.js examples, I found a way how to do this. http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/ is outdated. A way used in examples is to add skybox into second scene with fixed camera, and render both scenes. Look at webgl_materials_cars.html example.

Also because I use 3rd person camera assigned to character, I must get world rotation from character camera to skybox camera. This can be done on render with:

function render(){
<...>
    skyboxCamera.rotation.setEulerFromRotationMatrix( new THREE.Matrix4().extractRotation( camera.matrixWorld ), skyboxCamera.eulerOrder );
    renderer.render(skyboxScene, skyboxCamera);
    renderer.render(scene, camera);
<...>
}

Answer 2

I know it's a closed question but I want to offer an alternative that does not require an additional scene, for future seekers:

1. start by reading and following this tutorial: http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/

2. now create the following shader (I added it to three.js ShaderLib, but if you don't want to temper with three' source code add it outside):

   'skybox': {
   
   uniforms: { "tCube": { type: "t", value: null },
               "tFlip": { type: "f", value: -1 } },
   
   vertexShader: [
   
       "varying vec3 vWorldPosition;",
   
       THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
   
       "void main() {",
   
       "   vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
       "   vWorldPosition = worldPosition.xyz;",
   
       "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position + cameraPosition, 1.0 );",
   
           THREE.ShaderChunk[ "logdepthbuf_vertex" ],
   
       "}"
   
   ].join("\n"),
   
   fragmentShader: [
   
       "uniform samplerCube tCube;",
       "uniform float tFlip;",
   
       "varying vec3 vWorldPosition;",
   
       THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
   
       "void main() {",
   
       "   gl_FragColor = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );",
   
           THREE.ShaderChunk[ "logdepthbuf_fragment" ],
   
       "}"
   
   ].join("\n")
   

   },

3. create your skybox like this:

       // urls is a list of textures to use
   var cubemap = THREE.ImageUtils.loadTextureCube(urls); 
   cubemap.format = THREE.RGBFormat; 
   
   var shader = THREE.ShaderLib['skybox']; // init the skybox shader we created above
   shader.uniforms['tCube'].value = cubemap; // apply textures to shader
   
   // create shader material
   var skyBoxMaterial = new THREE.ShaderMaterial( {
     fragmentShader: shader.fragmentShader,
     vertexShader: shader.vertexShader,
     uniforms: shader.uniforms,
     depthWrite: false,
     side: THREE.BackSide
   });
   
   // create skybox mesh
   var skybox = new THREE.Mesh(
     new THREE.CubeGeometry(1000, 1000, 1000),
     skyBoxMaterial
   );
   
           // THIS IS IMPORTANT! or the skybox will get culled after you move the camera too far..
   skybox.frustumCulled = false;