javascript - Three.js Applying a random image to each of the faces of each cube in a group of cubes -

i new three.js , webgl please bear me :)

using http://mrdoob.github.com/three.js/examples/webgl_geometry_hierarchy.html starting point able map 6 images each of faces of cube. cube gets replicated creating effect show here:

http://assemblylondon.com/clients/dmsr/ss16/1/

what have array of x amount of images (let's 12) , have each of these 12 images applied randomly each of faces of each of cubes. having done extensive research on topic, not sure if possible, appreciate further clarification or confirmation.

here's code atm:

var camera, scene, renderer;          var geometry, group;          var mousex = 0, mousey = 0;          var windowhalfx = window.innerwidth / 2;         var windowhalfy = window.innerheight / 2;          document.addeventlistener( 'mousemove', ondocumentmousemove, false );          init();         animate();          function init() {              container = document.createelement( 'div' );             document.body.appendchild( container );              camera = new three.perspectivecamera( 40, window.innerwidth / window.innerheight, 1, 10000 );             camera.position.z = 500;              scene = new three.scene();              var geometry = new three.boxgeometry( 100, 100, 100 );             var material = new three.meshfacematerial( [                 new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '1.jpg' ) } ),                 new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '2.jpg' ) } ),                 new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '3.jpg' ) } ),                 new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '4.jpg' ) } ),                 new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '5.jpg' ) } ),                 new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '6.jpg' ) } )                 ] );              group = new three.group();              ( var = 0; < 60; ++ ) {                  var mesh = new three.mesh( geometry, material );                 mesh.position.x = math.random() * 1000 - 500;                 mesh.position.y = math.random() * 1000 - 500;                 mesh.position.z = math.random() * 1000 - 500;                  mesh.rotation.x = math.random() * 2 * math.pi;                 mesh.rotation.y = math.random() * 2 * math.pi;                  mesh.matrixautoupdate = false;                 mesh.updatematrix();                  group.add( mesh );              }              scene.add( group );              renderer = new three.webglrenderer( { alpha: true } );             renderer.setclearcolor( 0x000000, 0 );             renderer.setpixelratio( window.devicepixelratio );             renderer.setsize( window.innerwidth, window.innerheight );             renderer.sortobjects = false;              container.appendchild( renderer.domelement );        //      window.addeventlistener( 'resize', onwindowresize, false );  }  function onwindowresize() {      windowhalfx = window.innerwidth / 2;     windowhalfy = window.innerheight / 2;      camera.aspect = window.innerwidth / window.innerheight;     camera.updateprojectionmatrix();      renderer.setsize( window.innerwidth, window.innerheight );  }  function ondocumentmousemove(event) {      mousex = ( event.clientx - windowhalfx ) * 1;     mousey = ( event.clienty - windowhalfy ) * 1;  }      //      function animate() {          requestanimationframe( animate );          render();       }      function render() {          var time = date.now() * 0.001;          var rx = math.sin( time * 0.7 ) * 0.5,         ry = math.sin( time * 0.3 ) * 0.5,         rz = math.sin( time * 0.2 ) * 0.5;          camera.position.x += ( mousex - camera.position.x ) * .05;         camera.position.y += ( - mousey - camera.position.y ) * .05;          camera.lookat( scene.position );          group.rotation.x = rx;         group.rotation.y = ry;         group.rotation.z = rz;          renderer.render( scene, camera );      } 

thank in advance!

so want randomize images?

// create array of basic image materials.   var images = [   new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '1.jpg' ) } ),   new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '2.jpg' ) } ),   new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '3.jpg' ) } ),   new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '4.jpg' ) } ),   new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '5.jpg' ) } ),   new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '6.jpg' ) } ),   new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '7.jpg' ) } ),   new three.meshbasicmaterial( { map: three.imageutils.loadtexture( '8.jpg' ) } ) ]; group = new three.group(); ( var = 0; < 60; ++ ) {   // clone array can splice out, way image wont applied twice same cube.   var clone = images.splice(0);   var newarray = [];   for(var j = 0, j < 6, j++){     newarray[j] = clone.splice(math.floor(math.random() * clone.length-1), 1);   }   // create material.   var material = new three.meshfacematerial(newarray);   var mesh = new three.mesh( geometry, material );   mesh.position.x = math.random() * 1000 - 500;   mesh.position.y = math.random() * 1000 - 500;   mesh.position.z = math.random() * 1000 - 500;   mesh.rotation.x = math.random() * 2 * math.pi;   mesh.rotation.y = math.random() * 2 * math.pi;   mesh.matrixautoupdate = false;   mesh.updatematrix();    group.add( mesh ); } scene.add( group ); 

this untested, idea.