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 /

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./landscape/src/

• javascript
• webgl
• three.js

2 Answers 2

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.

I've also seen the "flipSided" switch in other examples and didn't get it to work (might be outdated). What works for me (with a sphere) is setting a negative scale:

skybox.scale.x = -1;