I have a Model that has a texture and a solid color using MeshFaceMaterials, But i read that BufferGeometry faces materials its not supported.
What options are there for keeping some parts of the model differnt colors or texture for each instance.
I have been following this example, wiht instancing selected. https://threejs.org/examples/#webgl_interactive_instances_gpu
I would be more then happy if my Track model could have 2 parts of it be solid black and 4 parts of it solid brown. But at the moment the only way i see to do that is to create two sets of instance and rip my model apart into two models.
Edited After reading reply
I think i mispoke I current have in array of MeshLambertMaterial called materials
function makeInstanced(geo, materials) {
// var vert = document.getElementById( 'vertInstanced' ).textContent;
// var frag = document.getElementById( 'fragInstanced' ).textContent;
//var material = new THREE.RawShaderMaterial({
// vertexShader: vert,
// fragmentShader: frag,
//});
var material = new THREE.MultiMaterial(materials);
var bgeo = new THREE.BufferGeometry().fromGeometry(geo);
geometryList.push(bgeo);
var mcol0 = new THREE.InstancedBufferAttribute(
new Float32Array(instanceCount * 3), 3, 1
);
var mcol1 = new THREE.InstancedBufferAttribute(
new Float32Array(instanceCount * 3), 3, 1
);
var mcol2 = new THREE.InstancedBufferAttribute(
new Float32Array(instanceCount * 3), 3, 1
);
var mcol3 = new THREE.InstancedBufferAttribute(
new Float32Array(instanceCount * 3), 3, 1
);
var igeo = new THREE.InstancedBufferGeometry();
geometryList.push(igeo);
igeo.addAttribute('mcol0', mcol0);
igeo.addAttribute('mcol1', mcol1);
igeo.addAttribute('mcol2', mcol2);
igeo.addAttribute('mcol3', mcol3)
var vertices = bgeo.attributes.position.clone();
igeo.addAttribute('position', vertices);
// var matrices = new THREE.InstancedBufferAttribute(
// new Float32Array( instanceCount * 16 ), 16, 1
// );
var matrix = new THREE.Matrix4();
var me = matrix.elements;
for (var i = 0, ul = mcol0.count; i < ul; i++) {
//Height Width X, Y, Z, ALPHA
randomizeMatrix(matrix);
//Create Object
var object = new THREE.Object3D();
objectCount++;
object.applyMatrix(matrix);
//Add Object To Matrix
mcol0.setXYZ(i, me[0], me[1], me[2]);
mcol1.setXYZ(i, me[4], me[5], me[6]);
mcol2.setXYZ(i, me[8], me[9], me[10]);
mcol3.setXYZ(i, me[12], me[13], me[14]);
}
var mesh = new THREE.Mesh(igeo, materials);
scene.add(mesh);
}