Three Js How To Map A Different Random Image On All Sides Of A Cube In A Group Of Cubes

Question

I am trying to incorporate something similar to the example at:

http://mrdoob.github.com/three.js/examples/webgl_geometry_hierarchy.html

I've got the cubes themselves to work fine, but I want to map a different image on each cube.

For example, I want one of the cubes to have a "Blogger" icon wrapped on each side, and a "Facebook" icon wrapped on each side of a different cube, and a "Twitter" icon wrapped on each side of a third cube,...ect, ect.

I've gotten a mapurl to work fine with just one cube, but I am having trouble mapping images when it comes to the Object3D group.

I am new to WebGL and Three Js, and any help would be greatly appreciated, Thanks! :)

Answer 1

This is how it's done since r53:

var geometry = new THREE.CubeGeometry( 100, 100, 100 );
var material = new THREE.MeshFaceMaterial( [
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image1.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image2.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image3.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image4.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image5.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'image6.jpg' ) } )
] );

var mesh = new THREE.Mesh( geometry, material );