mrdoob/three.js — Issue #1339: How to implement a "real" skybox
Author: huanghuan
Created: 2012-02-16 04:40:34+00:00
State: open

I followed the examples to create a skybox which is like:

var shader = THREE.ShaderUtils.lib[ "cube" ];
shader.uniforms[ "tCube" ].texture = textureCube;

var material = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false
});

var mesh = new THREE.Mesh(new THREE.CubeGeometry(1024, 1024, 1024), material);
mesh.flipSided = true;
scene.add(mesh);

However I found 2 issues with this approach:

1. Moving the camera inside the cube will make you notice that you are moving closer & closer to a corner or side of the cube.
2. The camera will eventually move out of the cube and the sky turns black.

After some googling I managed to fix the first issue by modifying the vertex shader slightly:

varying vec3 vViewPosition;
void main() {
vec4 mPosition = objectMatrix * vec4( position, 1.0 );
vViewPosition = cameraPosition - mPosition.xyz;
gl_Position = (projectionMatrix * modelViewMatrix * vec4( position, 0.0 )).xyww;
}

Here the w component of 0.0 & the swizzle of xyww does the trick (inspired by http://knol.google.com/k/3d-skybox#).

However I am still stuck with issue 2. I don't want to move the cube with the camera believing it can be done with some shader trick. So would someone please help me out? Thanks in advance!