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

Share Improve this question Follow edited Feb 7, 2022 at 12:43 vvvvv 32.2k1919 gold badges6565 silver badges100100 bronze badges asked Oct 1, 2012 at 8:56 Harry NorthoverHarry Northover 58111 gold badge66 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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;