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.

score 5 · Answer 1 · edited May 23 '17 at 12:08

5

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);

edited May 23 '17 at 12:08

Community

1
1

answered Jan 19 '15 at 16:06

gaitat

12,142
3
50
75

if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – gaitat Jun 06 '16 at 02:34

Applying textures to inside of a cube in three.js

1 Answers1