I seem to be facing a dilemma. I am attempting to consolidate several meshes into one in order to optimize draw calls. Each mesh I have comes with its own unique material, whether it be color or texture.
Below is the snippet of code I have been working on:
materials = [];
blocks = [];
var tempMat;
var tempCube;
var tempGeo;
var tempvec;
// block 1
tempMat = new THREE.MeshLambertMaterial({ color: '0x0000ff' });
materials.push(tempMat);
tempGeo = new THREE.CubeGeometry(1, 1, 1);
for (var ix = 0; ix < tempGeo.faces.length; ix++) {
tempGeo.faces[ix].materialIndex = 0;
}
tempCube = new THREE.Mesh(tempGeo, tempMat);
tempCube.position.set(0, 3, -6);
blocks.push(tempCube);
// block 2
tempMat = new THREE.MeshLambertMaterial({ color: '0x00ff00' });
materials.push(tempMat);
tempGeo = new THREE.CubeGeometry(1, 1, 1);
for (var ix = 0; ix < tempGeo.faces.length; ix++) {
tempGeo.faces[ix].materialIndex = 1;
}
tempCube = new THREE.Mesh(tempGeo, tempMat);
tempCube.position.set(1, 3, -6);
blocks.push(tempCube);
// Merging all blocks into one
var geo = new THREE.Geometry();
for (var i = 0; i < blocks.length; i++) {
blocks[i].updateMatrix();
geo.merge(blocks[i].geometry, blocks[i].matrix, i);
}
var newmesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial(materials));
scene.add(newmesh);
However, every time my render function runs, I encounter this error message: "Uncaught TypeError: Cannot read property 'visible' of undefined".
I'm puzzled as to where I might have made an error. Any insights?