Applying textures to inside of a cube in three.js

Question

I'm trying to apply a different image on each face of a cube, on the inside.

I have a working example here: http://codepen.io/anon/pen/mymOKe

I load the images like this:

var material = [
                new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); })
}),
                new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); })
}),
                new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); })
}),
                new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); })
}),
                new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); })
}),
                new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('http://placehold.it/512x512', {}, function(){ webGLRenderer.render(scene, camera); })
})
];

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, new THREE.MeshFaceMaterial(material));

mesh.doubleSided = true;

And it doesn't work. In the code it starts at line 82. At line 107 there is a commented part to build the cube with colors instead of textures, and that works.

Answer 1

What you need is to define THREE.BackSide in your material. For example:

var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });

EDIT

Updated your code: http://codepen.io/anon/pen/OVLVVr?editors=001

Look at Three.js and loading a cross-domain image for an explanation.

Also the code:

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, new THREE.MeshFaceMaterial(material));

should be:

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, material);