Javascript Three.js将随机图像应用于一组立方体中每个立方体的每个面

我不熟悉three.js和WebGL，所以请耐心听我说：）

作为起点，我能够将6幅图像映射到立方体的每个面上。然后复制此多维数据集，创建如下所示的效果：

我想做的是有一个x数量的图像数组（比如说12个），并将这12个图像中的每一个随机应用到每个立方体的每个面上。在对这一主题进行了广泛研究之后，我不确定这是否可行，但希望进一步澄清或确认

这是我的代码：

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

            for ( var i = 0; i < 60; i ++ ) {

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

    }

var摄像机、场景、渲染器；
变量几何，组；
var mouseX=0，mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
document.addEventListener（'mousemove'，onDocumentMouseMove，false）；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（40，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=500；
场景=新的三个。场景（）；
var geometry=新的3.BoxGeometry（100100100）；
var材质=新的三个。网格面材质（[
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'1.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'2.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'3.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'4.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'5.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'6.jpg'）}）
] );
组=新的三个。组（）；
对于（变量i=0；i<60；i++）{
var mesh=新的三个网格（几何体、材质）；
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（）；
组。添加（网格）；
}
场景。添加（组）；
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.doElement）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
windowHalfX=window.innerWidth/2；
windowHalfY=window.innerHeight/2；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
onDocumentMouseMove函数（事件）{
mouseX=（event.clientX-windowHalfX）*1；
mouseY=（event.clientY-windowHalfY）*1；
}
//
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
var time=Date.now（）*0.001；
var rx=数学sin（时间*0.7）*0.5，
ry=数学sin（时间*0.3）*0.5，
rz=数学sin（时间*0.2）*0.5；
camera.position.x+=（mouseX-camera.position.x）*.05；
camera.position.y+=（-mouseY-camera.position.y）*.05；
摄像机。注视（场景。位置）；
旋转组x=rx；
旋转组y=ry；
旋转组z=rz；
渲染器。渲染（场景、摄影机）；
}

---

提前谢谢你

那么你只想随机排列这些图像

// 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();
for ( var i = 0; i < 60; i ++ ) {
  // clone the array so we can splice some out, this way an image wont be applied twice to the 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 );

//创建基本图像材质数组。
变量图像=[
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'1.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'2.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'3.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'4.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'5.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'6.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'7.jpg'）}），
新的THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'8.jpg'）}）
];
组=新的三个。组（）；
对于（变量i=0；i<60；i++）{
//克隆阵列以便我们可以拼接出一些，这样图像就不会在同一个立方体上应用两次。
var clone=images.splice（0）；
var newArray=[]；
对于（var j=0，j<6，j++）{
newArray[j]=clone.splice（Math.floor（Math.random（）*clone.length-1），1）；
}
//创建材质。
var material=新的三个网格面材质（新数组）；
var mesh=新的三个网格（几何体、材质）；
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（）；
组。添加（网格）；
}
场景。添加（组）；

---

这是未经测试的，但你明白了

不幸的是，这不起作用，我得到了以下错误类型错误：undefined不是一个对象（计算'Ua.uniforms'）—而且我在

for（var j=0，j<6，j++）中替换了分号的逗号。