如何在一个立方体组中的所有立方体的各个面上映射不同的随机图像？使用Three.js。

Question

我正在尝试实现类似于以下示例的功能：

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

立方体本身可以正常工作，但我想在每个立方体上映射不同的图像。

例如，我想让一个立方体的每一面都包裹着“Blogger”图标，另一个立方体的每一面都包裹着“Facebook”图标，第三个立方体的每一面都包裹着“Twitter”图标，等等。

我已经成功地使用mapurl在单个立方体上工作，但是在Object3D组中映射图像时遇到了问题。

我是WebGL和Three Js的新手，非常感谢任何帮助，谢谢！ ：）

- Jonathan Mattox

Answer 1

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

- mrdoob

Answer 2

目前（2017年12月），ImageUtils.loadTexture、MeshFaceMaterial和CubeGeometry已不再使用（已弃用）。https://threejs.org/docs/#api/deprecated/DeprecatedList

现在的做法是：

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

这里有一个链接，是一个非常好的简短教程，解释了这个过程： https://www.youtube.com/watch?v=l77yAZ0E950

- Josip Lukacevic