Cube map distorts when you translate mesh - three.js

Question

Trying to create a skybox using the cubemap shader (like in the examples) and noticed a distortion when you transate the mesh.
If you create a cube of say 1 dimension width, height, and depth. Set the side to be THREE.BackSide and depthWrite to false. Then scale the mesh to say 1000 units in the x, y, and z fields.
When the mesh is positioned in the center of the world everything is fine. But as soon as you translate the mesh the cube map starts to distort badly.
You would want to move the mesh to be the same position as the camera thereby never allowing the skybox to reach its limits if the user walks around.
The shader code I'm using is this:
'cube': {
uniforms: { "tCube": { type: "t", value: null },
"tFlip": { type: "f", value: -1 } },
vertexShader: [
"varying vec3 vWorldPosition;",
"void main() {",
"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
"vWorldPosition = worldPosition.xyz;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform samplerCube tCube;",
"uniform float tFlip;",
"varying vec3 vWorldPosition;",
"void main() {",
"gl_FragColor = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) );",
"}"
].join("\n")
}
Does anyone know if the shader can be modified to prevent this distortion?
Many thanks!

Answer 1

After doing some research, I found that the cube map shaders for skyboxes rely on the camera to be in the center of the world. So to get this working in the scenario I described above, instead of setting the position of the skybox to the camera, I simply set the camera's world position to be 0.
Just before rendering the skybox you need to do this:
// Get the current position
this._prevCamPos.getPositionFromMatrix( camera.matrixWorldInverse );
// Now set the position of the camera to be 0,0,0
camera.matrixWorldInverse.elements[12] = 0;
camera.matrixWorldInverse.elements[13] = 0;
camera.matrixWorldInverse.elements[14] = 0;
Then just after its rendered it needs to go back:
// Now revert the camera back
camera.matrixWorldInverse.elements[12] = this._prevCamPos.x;
camera.matrixWorldInverse.elements[13] = this._prevCamPos.y;
camera.matrixWorldInverse.elements[14] = this._prevCamPos.z;