三的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