Jak korzystać z wielu materiałów w module Three.js?

Question

Próbuję użyć Three.js do renderowania sześcianu z 6 różnymi obrazami na twarzach.

Konstruktor THREE.CubeGeometry wygląda następująco:

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

można zobaczyć z kodem, który przewiduje się „materiały” być zarówno materiałem lub tablica 6 z różnych materiałów, ale materiały przekazywane tutaj nigdy nie wydają się być używane podczas renderowania.

Zamiast tego pojedynczy materiał nadawany konstruktorowi siatki jest używany dla wszystkich 6 ścian.

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 

Nawet jeśli mijam null lub niezdefiniowane jako „some_material”, wydaje się, aby zastąpić face_materials i czynią nic.

Czy istnieje sposób, aby to działało za pomocą CubeGeometry? Czy muszę utworzyć osobno 6 twarzy i dodać je do sceny?

Answer 1

Musisz użyć THREE.MeshFaceMaterial dla siatki. Oto przykładowy kod:

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

Na przykład przy użyciu wielu materiałów w kostce, na najnowszej wersji Three.js wersji 56 (marzec 2013), Sprawdź kod źródłowy przykład w http://stemkoski.github.com/Three.js/Textures.html - w Największą ostatnią zmianą jest to, że THREE.MeshFaceMaterial musi zostać przekazany w postaci tablicy materiałów do użycia w CubeGeometry.