Ako používať viacero materiálov v kocke Three.js? - three.js

Snažím sa použiť Three.js na vykreslenie kocky so 6 rôznymi obrázkami na tvári.

Konštruktor THREE.CubeGeometry vyzerá takto:

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

Z kódu vidím, že sa očakáva, že „materiály“ budú buď materiálom, alebo súborom 6 rôznych materiálov, ale materiály, ktoré tu boli odovzdané, sa pri vykresľovaní nikdy nepoužívajú.

Namiesto toho sa jediný materiál daný konštruktorovi pletiva použije pre všetkých 6 tvárí.

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

Aj keď prejdem null alebo nedefinovaný ako „some_material“, zdá sa, že potlačí face_materials a neposkytne nič.

Existuje spôsob, ako to urobiť pomocou CubeGeometry? Alebo musím vytvoriť 6 tvárí osobitne a pridať ich na scénu?

odpovede:

Pre sieť musíte použiť THREE.MeshFaceMaterial. Tu je príklad kódu:

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

Príklad použitia viacerých materiálov v kocke pre najnovšiu verziu súboru 56.js verzie 56 (marec 2013) nájdete v zdrojovom kóde príkladu na adrese http://stemkoski.github.com/Three.js/Textures.html - najväčšou poslednou zmenou je to THREE.MeshFaceMaterial je potrebné odovzdať celý rad materiálov, ktoré sa majú použiť v EÚ CubeGeometry.