Three.js: отображение двух текстур в куб

Question

Трудно найти обновленный ответ на этот вопрос. Похоже, что многие решения используют MeshFaceMaterial, который давно ушел из three.js (около версии 53, в настоящее время на 84)

Из исследования, которое я сделал, кажется, что это лучшая стратегия создания коробки, превратите его в сферу, а затем сделайте отображения.

Вот что я получил:

Я текстуры загружены на вары t1 и 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); 

Проблемы:

• Это приводит в Uncaught TypeError: Cannot read property 'visible' of undefined в моей консоли
• Для причин затенения я хотел бы использовать MeshPhongMaterial вместо MeshLamber tMaterial

Любые советы были бы высоко оценены!

Answer 1

Посмотрите на значение materialIndex внутри граней геометрии. Эти значения являются индексами в вашем массиве materials.

В вашем примере вы увидите, что они имеют значения от 0 до 5 (соответствующие сторонам коробки), но поскольку предоставляются только два материала, вы увидите сообщение об ошибке.

Чтобы решить вашу проблему, вы можете просто изменить значения materialIndex на гранях геометрии, чтобы они просто ссылались на ваши два материала.

Например:

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