Three.jsキューブで複数の材料を使用するには？

Question

私はThree.jsを使用して、6つの異なるイメージを含むキューブをレンダリングしようとしています。

THREE.CubeGeometryのコンストラクタは次のようになります

THREE.CubeGeometry = function (width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides) 

Iが「材料」は物質、または6つの異なる材料のアレイのいずれかであることが予想されるコードから見ることができるが、材料ここで渡されたものは、レンダリング時に使用されることはありません。

代わりに、メッシュコンストラクタに与えられた単一の材料が、6つのすべての面に使用されます。

var face_materials = ... <load 6 textures here>... 
var cube_g = new THREE.CubeGeometry(400,400,400,1,1,1, face_materials); // <= ignored? 
var cube = new THREE.Mesh(cube_g, some_material); // <= this is used instead 

「some_material」としてnullまたはundefinedを渡しても、face_materialsをオーバーライドして何も表示されないようです。

CubeGeometryを使用してこの作業を行う方法はありますか？または、6つの顔を別々に作成してシーンに追加する必要がありますか？

Answer 1

メッシュにTHREE.MeshFaceMaterialを使用する必要があります。ここではサンプルコードがあります：

var materials = []; 
for (var i=0; i<6; i++) { 
    var img = new Image(); 
    img.src = i + '.png'; 
    var tex = new THREE.Texture(img); 
    img.tex = tex; 
    img.onload = function() { 
    this.tex.needsUpdate = true; 
    }; 
    var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex}); 
    materials.push(mat); 
} 
var cubeGeo = new THREE.CubeGeometry(400,400,400,1,1,1, materials); 
var cube = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial()); 

Answer 2

キューブ内で複数の材料を使用する例については、three.jsバージョン56（2013年3月）の最新バージョンのため、http://stemkoski.github.com/Three.js/Textures.htmlの例のソースコードをチェックアウト - 最近の最大の変更点は、THREE.MeshFaceMaterialにCubeGeometryで使用する一連の材料を渡す必要があることです。