3.js skybox assigned to the camera

Question

I am trying to make skybox assigned to a player’s camera. When the camera moves (also the skybox moves with it), the texture stretches. 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 to do this. http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/ is deprecated. The method used in the examples is to add skybox to the second scene with a fixed camera and display both scenes. See an example webgl_materials_cars.html.

Also, because I am using a third-party camera assigned to the character, I have to get the world spinning from the character’s camera to the skybox camera. This can be done 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 this is a closed-ended question, but I want to offer an alternative that does not require an additional scene for future seekers:

• start reading and follow this guide: http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/

• now create the following shader (I added it to the shaderLib file for three .js, but if you do not want you to not add it with three sources):

   '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") 

  },

• create your skybox as follows:

    // 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;