We recently upgraded to version r68 and are in the process of transitioning all our geometries to THREE.BufferGeometry.
Previously, we were utilizing THREE.MeshFaceMaterial extensively. However, after consulting this resource on BufferGeometry faces materials, it appears that THREE.BufferGeometry does not support this feature. The suggested workaround involves creating multiple meshes, which I attempted without encountering any errors.
This is the approach I took:
var oldGeometry = ... // THREE.Geometry from our loader
var materials = ... // Material array from our loader, includes lightmaps, normalmaps, etc.
var bufferGeometry = new THREE.BufferGeometry();
var geometry = bufferGeometry.fromGeometry(oldGeometry);
var group = new THREE.Object3D();
materials.forEach(function(material){
group.add(new THREE.Mesh(geometry, material));
});
geometry.attributes.uv = geometry.attributes.uvs;
While this method runs smoothly without errors, upon rendering, the lightmaps and other features do not seem to apply, resulting in a single colored geometry. Any advice on properly implementing this?
Update:
Regarding the UV issue, more information can be found here: https://github.com/mrdoob/three.js/issues/5118
Update 2:
Upon reviewing the WebGLRenderer Source Code, it seems that the implementation of this solution requires more effort than anticipated at the moment. Therefore, we will continue using the old geometry for now, but I am open to suggestions ;)
Update 3: For those interested in a basic DIY approach, a helpful guide can be accessed here: https://github.com/mrdoob/three.js/issues/5268
Progress is being made in this area as discussed here: https://github.com/mrdoob/three.js/issues/5417, focused on enhancing the three.js exporter, especially concerning exporting buffergeometries with multiple materials.