I have recently designed a wall-like structure using extrude geometry and now I want to assign different colors to each side based on the settings below:
var extrusionSettings = {
curveSegments:5,
steps: 10,
amount: 200,
bevelEnabled: true,
bevelThickness: default_height,
bevelSize: 0,
bevelSegments: 8,
material: 0,
extrudeMaterial: 5
};
var geometry1 = new THREE.ExtrudeGeometry( shape1, extrusionSettings );
var materialLeft = new THREE.MeshLambertMaterial({
color: 0xd6d6d6,// cement
//transparent:true,
side: THREE.DoubleSide,
ambient: 0xd6d6d6
});
var materialRight = new THREE.MeshLambertMaterial({
color: 0xd6d6d6,//violet
//transparent:true,
side: THREE.DoubleSide,
ambient: 0xcc49c3
});
var materialTop = new THREE.MeshLambertMaterial({
color: 0x8649cc,//blue
//transparent:true,
side: THREE.DoubleSide,
ambient: 0x8649cc
});
var materialBottom = new THREE.MeshLambertMaterial({
color: 0x4ac4b6,// green
//transparent:true,
side: THREE.DoubleSide,
ambient: 0x4ac4b6
});
var materialFront = new THREE.MeshLambertMaterial({
color: 0x567E14,// dark green
//transparent:true,
side: THREE.DoubleSide,
ambient: 0x567E14
});
var materialSide = new THREE.MeshLambertMaterial({
color: 0xa8a843,// yellow
//transparent:true,
side: THREE.DoubleSide,
ambient: 0xa8a843
});
//var materials = [ materialFront, materialSide ];
var materials = [
materialLeft, // Left side
materialRight, // Right side
materialTop, // Top side
materialBottom,// Bottom side
materialFront, // Front side
materialSide, // Back side
];
var material = new THREE.MeshFaceMaterial( materials );
var mesh1 = new THREE.Mesh( geometry1, material );
When using material: 0,extrudeMaterial: 5, it refers to the materials at positions 0 and 5 in the array. However, I am looking for guidance on how to properly distribute all colors from the array to correspond with the sides of the shape.
If anyone could provide assistance, that would be greatly appreciated.