How to make inside color of cube visible in three.js?

Question

I want to build a room with THREE.js starting from a cube. So far I have the following code:

function loadModelcube() {
    console.log("Inside the function");
    cube.traverse( function( node ) {
    if( node.material ) {
        node.material.side = THREE.DoubleSide;
        }
    });
    scene.add( cube );
}

var geometry = new THREE.BoxGeometry(100,50,100);
var material = new THREE.MeshBasicMaterial({color: 0xff4444, wireframe: false}); 
cube = new THREE.Mesh(geometry, material);

var managercube = new THREE.LoadingManager( loadModelcube );

With the code above, the cube is not visible as is expected. Also, I don't see the console logging being printed out as expected (ie due to the function loadModelcube() being called). Does anyone know what is going wrong?

Answer 1

To make the box geometry visible from the inside, you need to ensure that the side field of the material (ie the one assigned to your cube mesh) is set appropriately.

In your case, setting material.side to THREE.BackSide would achieve the desired result.

Applying the following changes should work for you:

var geometry = new THREE.BoxGeometry(100,50,100);
var material = new THREE.MeshBasicMaterial({color: 0xff4444, wireframe: false}); 

/* Cause the material to be visible for inside and outside */
material.side = THREE.BackSide; 

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Alternatively, if you want the cube to be visible from the inside and outside, you could set material.side to THREE.DoubleSide.