Three.js: Zuordnen von zwei Texturen zu einem Würfel

Question

Es ist schwierig, eine aktualisierte Antwort auf diese Frage zu finden. Scheint so, als ob viele Lösungen MeshFaceMaterial verwenden, die lange von three.js entfernt ist (um Version 53, derzeit auf 84)

Aus der Forschung, die ich gemacht habe, scheint es eine bessere Strategie zu sein, eine Box zu erstellen, verwandle es in eine Kugel und mache dann die Abbildungen.

Hier ist, was ich habe:

Ich habe Texturen geladen bei Vars t1 und t2

var geometry = new THREE.BoxGeometry(1,1,1); 

for (var i in geometry.vertices) { 
    var vertex = geometry.vertices[i]; 
    vertex.normalize().multiplyScalar(1); 
} 

var mat1 = new THREE.MeshLambertMaterial({ map: t1 }); 
var mat2 = new THREE.MeshLambertMaterial({ map: t2 }); 

var materials = [mat1, mat2]; 
var mats = new THREE.MultiMaterial(materials); 

var cube = new THREE.Mesh(geometry, mats); 

scene.add(cube); 

Probleme:

• Dies ist in Uncaught TypeError: Cannot read property 'visible' of undefined in meiner Konsole resultierende
• Aus Schattierungsgründen möchte ich ein MeshPhongMaterial statt eines MeshLambers verwenden tMaterial

Alle Tipps würden sehr geschätzt werden!

Answer 1

Schauen Sie sich den Wert materialIndex in den Flächen der Geometrie an. Diese Werte sind Indizes in Ihrem materials Array.

In Ihrem Beispiel sehen Sie, dass sie Werte von 0 bis 5 haben (entsprechend den Seiten der Box), aber da nur zwei Materialien zur Verfügung gestellt werden, dann sehen Sie einen Fehler.

Um Ihr Problem zu lösen, können Sie einfach die materialIndex Werte auf den Geometrieflächen ändern, sodass sie nur auf Ihre beiden Materialien verweisen.

Zum Beispiel:

for (var i = 0; i < geometry.faces.length; i += 1) { 
    var face = geometry.faces[i]; 
    face.materialIndex = face.materialIndex % 2; 
}