三的js如何映射不同的随机图像上的所有边的立方体A组立方体

Question

我试图在纳入类似的例子东西：

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

我已经得到了立方体自己工作正常，但我想在每个立方体上映射不同的图像。例如，我希望其中一个多维数据集的每边都包含一个“Blogger”图标，并在另一个多维数据集的每边包裹一个“Facebook”图标，并在每边包裹一个“Twitter”图标第三个立方体，等...等。

我已经得到了mapurl只用一个立方体就可以正常工作，但是在Object3D组中，我无法映射图像。

我是新来的WebGL和三个Js，任何帮助将不胜感激，谢谢！ :)

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

Answer 2

此时（十二月2017）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