Javascript 三个Js如何在一组立方体中的立方体的所有边上映射不同的随机图像

我正在尝试合并类似于以下示例的内容：

我已经让立方体本身工作良好，但我想在每个立方体上映射不同的图像

例如，我希望其中一个立方体的每一面都有一个“Blogger”图标，另一个立方体的每一面都有一个“Facebook”图标，第三个立方体的每一面都有一个“Twitter”图标，等等

我已经得到了一个mapurl，它可以很好地处理一个立方体，但是当涉及到Object3D组时，我很难映射图像

---

我是WebGL和三个Js的新手，非常感谢您的帮助，谢谢！）

这是自

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

目前（2017年12月），ImageUtils.loadTexture、MeshFaceMaterial和CubeGeometry不再使用（已弃用）

新的方法是：

var geometry = new THREE.BoxGeometry( 10, 10, 10);
var material = [
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image1.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image2.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image3.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image4.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image5.jpg' ) } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'image6.jpg' ) } )
];

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

这里有一个链接，指向一个优秀的简短教程，解释该过程：