Три JS Merged BoxBuffer Geometry и отдельные материалы

Question

Я создал документ, в котором объединяю 5 BoxGeometries. Похоже, я успешно объединил эти блоки, но у меня возникли проблемы с пониманием того, как контролировать материал. Обычный материал для ящика представляет собой или может быть массивом из шести сторон, и каждая сторона имеет свой материал или цвет.

При объединении 5 ящиков я хочу установить разные материалы для лицевой стороны ящика и задней стороны ящика. Объединенное me sh также может принимать массив материалов, и в методе объединения может быть задан индекс материала, который следует использовать для каждой геометрии, однако в моем случае мне разрешено использовать только индекс 0, даже если имеется 6 материалы.

Кроме того, я подумал, что мог бы быть хитрым и создать массив материалов, массив из 6. Затем я мог бы снабдить каждую коробку требуемыми 6 сторонами и контролировать материал на каждой коробке. Не повезло.

Я включаю JSFIDDLE, чтобы показать вам, что. Я говорю о Успешный вывод будет иметь разные цвета спереди и сзади для каждой коробки. Это подразумевает контроль над текстурами.

ТРИ. JS 110

https://jsfiddle.net/cgm5a4nk/

//Box Material
let materialArray = [
    new THREE.MeshBasicMaterial( {color:0x5EFF33, side: THREE.DoubleSide, name:"Right Side"} ),
    new THREE.MeshBasicMaterial( {color:0x3358FF, side: THREE.DoubleSide, name:"Left Side"} ),
    new THREE.MeshBasicMaterial( {color:0xF033FF, side: THREE.DoubleSide, name:"Top Side"} ),
    new THREE.MeshBasicMaterial( {color:0xFF3339, side: THREE.DoubleSide, name:"Bottom Side"} ),
    new THREE.MeshBasicMaterial( {color:0xFCFF33, side: THREE.DoubleSide, name:"Top Side"} ),
    new THREE.MeshBasicMaterial( {color:0xFFA533, side: THREE.DoubleSide, name:"Bottom Side"} )
];

//Create Geometries
let slice1Geometry = new THREE.BoxGeometry(15.2, 15,0.5, 10,10);
let slice2Geometry = new THREE.BoxGeometry(15, 14.7,0.5, 10,10);
let slice3Geometry = new THREE.BoxGeometry(15.2, 15.2,0.5, 10,10);
let slice4Geometry = new THREE.BoxGeometry(15, 14.7,0.5, 10,10);
let slice5Geometry = new THREE.BoxGeometry(15.2, 15,0.5, 10,10);
let finalGeometry = new THREE.BoxGeometry();

//Create Mesh from Geometries and position
let slice1Mesh = new THREE.Mesh( slice1Geometry );
slice1Mesh.position.set(0,15.1,0)
slice1Mesh.updateMatrix();

var slice2Mesh = new THREE.Mesh( slice2Geometry );
slice2Mesh.position.set(-15.1,0,0)
slice2Mesh.updateMatrix();

var slice3Mesh = new THREE.Mesh( slice3Geometry );
slice3Mesh.position.set(0,0,0)
slice3Mesh.updateMatrix();

var slice4Mesh = new THREE.Mesh( slice4Geometry );
slice4Mesh.position.set(15.1,0,0)
slice4Mesh.updateMatrix();

var slice5Mesh = new THREE.Mesh( slice5Geometry );
slice5Mesh.position.set(0,-15.1,0)
slice5Mesh.updateMatrix();

//Merge Geometries to one
finalGeometry.merge(slice1Mesh.geometry, slice1Mesh.matrix, 0);
finalGeometry.merge(slice2Mesh.geometry, slice2Mesh.matrix, 0);
finalGeometry.merge(slice3Mesh.geometry, slice3Mesh.matrix, 0);
finalGeometry.merge(slice4Mesh.geometry, slice4Mesh.matrix, 0);
finalGeometry.merge(slice5Mesh.geometry, slice5Mesh.matrix, 0);

//Get rid of duplicate Vertices
finalGeometry.mergeVertices();


//Create some helper stuff
let crossGeometry = new THREE.BufferGeometry().fromGeometry(finalGeometry);
crossGeometry.computeBoundingBox();
boundingBoxHelper = new THREE.Box3Helper( crossGeometry.boundingBox, '#ff0000' );
let worldAxis = new THREE.AxesHelper(10);

//Create BoxBufferGeometry from merged geometry
let crossMesh = new THREE.Mesh(crossGeometry, materialArray);
crossMesh.add(boundingBoxHelper);
crossMesh.add(worldAxis);