Hello. In my source 3D model (Autodesk Inventor) there are several items which are each instanced over 300 times. Each instance of the items is positioned in a different location. It’s quite a complex assembly. We export through 3D Studio Max to create a gltf file and find that we need to retain the instances to keep the export process manageable and the gltf file size reasonable.
If I load the gltf file in Three and just render it the huge number of individual objects overwhelms the renderer and it is predictable too slow. None of the items move and similar objects can be assigned the same material so merging the identical objects into a single object seems sensible.
I tried the following:
// Get the objects.
const importedObjects: THREE.Object3D = scene.getObjectByName("Part_Group");
// Check we have found the Objects.
if (importedObjects !== null) {
// Create an empty Object to hold the Geometry.
let mergedGeometry = new THREE.Geometry();
// Create a material.
const objectMaterial = new THREE.MeshLambertMaterial({ color: 0xffff00, side: THREE.DoubleSide })
// Iterate through the children
importedObjects.children.forEach(child => {
if (child instanceof THREE.Mesh) {
mergedGeometry.mergeMesh(child);
}
});
const mergedGeom = BufferGeometryUtils.mergeBufferGeometries(tundishGeometryArray);
// Create an object3D from the tundishes Geometry.
const mergedMesh = new THREE.Mesh(mergedGeom, objectMaterial);
// Add the tundishes to the scene.
this.sceneMaster.add(mergedMesh);
…but I get the following error: “THREE.Geometry.merge(): geometry not an instance of THREE.Geometry”. The docs seem to indicate that mergeMesh takes a THREE.Mesh as an argument. I have also tried many variations around this theme but can’t figure out where I am going wrong. Perhaps it’s something obvious I just can’t see.
Thanks for such a prompt reply. So I tried mergeBufferGeometries() as follows but all of the items appear in the same location. Performance doesn’t seen great either. I must be missing something obvious:
// Get the objects.
const importedObjects: THREE.Object3D = scene.getObjectByName("Part_Group");
// Check we have found the Objects.
if (importedObjects !== null) {
// Create an empty Object to hold the Geometry.
const geometryArray = [];
// Create a material.
const objectMaterial = new THREE.MeshLambertMaterial({ color: 0xffff00, side: THREE.DoubleSide })
// Iterate through the children
importedObjects.children.forEach(child => {
if (child instanceof THREE.Mesh) {
geometryArray.push(child.geometry);
}
});
let mergedGeom = new THREE.BufferGeometry();
mergedGeom = BufferGeometryUtils.mergeBufferGeometries(geometryArray);
// Create an object3D from the tundishes Geometry.
const mergedMesh = new THREE.Mesh(mergedGeom, objectMaterial);
// Add the tundishes to the scene.
this.sceneMaster.add(mergedMesh);
As shown in the example, you can’t just push the geometries directly into the array. Instead, you have to clone it and apply the world matrix of the respective mesh to it. Try it with:
It makes sense that the geometry object has no knowledge of where it is in the world and that I need to use the child’s position to set the position of the geometry. I followed your suggestion but still all the objects appear in the same position on top of each other and it still seems to perform poorly. My geometry objects only had a applyMatrix method, not applyMatrix4, I wondered if that was a THREE version issue. I am using v17.1.0. My code now reads as follows:
// Get the objects.
const importedObjects: THREE.Object3D = scene.getObjectByName("Part_Group");
// Check we have found the Objects.
if (importedObjects !== null) {
// Create an empty Object to hold the Geometry.
const geometryArray = [];
// Create a material.
const objectMaterial = new THREE.MeshLambertMaterial({ color: 0xffff00, side: THREE.DoubleSide })
// Iterate through the children
importedObjects.children.forEach((child: THREE.Mesh) => {
if (child instanceof THREE.Mesh) {
// Create a clone of the current child Mesh's geometry.
const geometryClone = child.geometry.clone();
// Bake the current child's world transform matrix into the new clone.
geometryClone.applyMatrix(child.matrixWorld);
// Add the cloned geometry into the array.
geometryArray.push(geometryClone);
}
});
let mergedGeom = new THREE.BufferGeometry();
mergedGeom = BufferGeometryUtils.mergeBufferGeometries(geometryArray);
// Create a Mesh from the Geometry.
const mergedMesh = new THREE.Mesh(mergedGeom, objectMaterial);
// As the object is not moving, prevent THREE from calculating the object's position.
mergedMesh.matrixAutoUpdate = false;
// Add the Mesh to the scene.
this.sceneMaster.add(mergedMesh);
As a test we combined the objects at source and then exported a gltf file (23Mb) and once loaded it performed brilliantly as it only had about 32 objects. Obviously we would prefer to not have such a large file. Using instances at source the gltf file came in at about 200Kb but it had thousands of individual parts which performed badly. I am hoping to have my cake and eat it by loading the small file, identify and push the core parts into the main scene and then identify the instances and merge them before adding them to the scene. After this I don’t need the loaded object any more. Does that make sense?