Three.js skybox texture issue.

Question

I'm trying to create a simple Skybox using Three.js but have run into an issue with the texture I'm applying to the cube only working on the outside, and not displaying on the inside of the cube.

Here's my skybox code:

var path = assetPath + skyboxPrefix;
var urls = [ path + 'alpine_front.jpg',
             path + 'alpine_back.jpg',
             path + 'alpine_left.jpg',
             path + 'alpine_right.jpg',
             path + 'alpine_top.jpg' ];

var cubeTexture = THREE.ImageUtils.loadTextureCube( urls );

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

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

var skyboxGeom = new THREE.CubeGeometry( 10000, 10000, 10000 );

skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
skybox.flipSided = true;

scene.add(skybox);

Here's a live version http://projects.harrynorthover.com/landscape/src/

Many thanks in advanced!

mrdoob mrdoob · Accepted Answer · 2012-10-01T11:07:13

object.flipSided has been gone since r50. It got replaced with object.material = THREE.BackSide. Checking updated examples that use the same feature and also this migration page should be handy on cases like this.

Three.js skybox texture issue.

2 Answers