Here in this fiddle, you can find an example of the issue I am facing: http://jsfiddle.net/saward/78Bjk/7/
If you uncomment scene.add(tree_mesh) and scene.add(mesh2), and comment out scene.add(mesh), you will be able to see both objects. However, when I merge both objects, the material information for tree_mesh seems to disappear. If I adjust the mesh to use the same material as mesh2, then both objects display but with the incorrect material.
I would really appreciate some help in understanding what is happening here and how it can be resolved!
Thank you
Below is the code from the fiddle (requires three.js r57):
var camera, scene, renderer, geometry, material, mesh1, mesh2, mesh;
init();
animate();
// Rest of the code...
Update: To specifically address this issue, I utilized the latest dev version of three.js 58, and added the materials for each model into a larger array.
As mentioned in the solution provided, MeshFaceMaterial cannot be used as a material, so it is necessary to iterate over all the materials within the MeshFaceMaterial and add them sequentially to the array.
Then keep track of the index of the first material in the larger array for each model. When merging the meshes, instead of using setMaterialIndex, provide it with the index of the first material in the array for that specific model. Here is an example:
THREE.GeometryUtils.merge(large_geo, some_mesh, some_mesh.material_offset);
large_mesh = new THREE.Mesh(large_geo, new THREE.MeshFaceMaterial(materials_list));
Where "some_mesh.material_offset" will be a new value you set and store for yourself somewhere. Please note that this method is not compatible with r57 or earlier versions.