How to merge meshes from imported 3D Model (glb or gltf)?

Questions
1

Hi! I am new to ThreeJS and I would love some help on this one. I am importing a 3d model into my Threejs scene and I want to create many clones of that model, I tried the .clone() method but when the number of the clones starts to go up the performance drops quite a lot. (i logged some renderer info and the draw calls were about 1200+ and the triangles were more than a million for about 20 cloned models).

I saw from my research that they were recommending using InstancedMesh or merging the meshes into one but I am not entirely sure how to implement that with an imported 3D model.

Thank you for your time!

2

This example includes code that creates an InstancedMesh from geometries imported from GLB files:

https://threejs.org/examples/?q=scatter#webgl_instancing_scatter

3

Thank you for your reply! I tried to do the same as in the example but get the following error:

image

My Code:
image

4

This would imply Scene is not a THREE.Mesh. It may be a Group or an Object3D, containing one or more mesh. If the model contains many meshes you will need to construct an InstancedMesh for each one.

5

It is indeed an Object3D. I traversed the object and put the geometry in an array, when I console.log() the array this is what it shows:

image
image475×642 13.2 KB

How exactly can I construct an InstancedMesh for each one? Sorry for asking so many questions but I am new to Threejs

6

It sounds like you have maybe 85 draw calls per model. If total draw calls are around 1200 then that’s roughly 15 instances of the model. I’m not sure I’d recommend using instancing in this case. The model itself should be simplified. The gltfpack tool is often a good place to start, or editing the model in Blender, or finding a simpler source model.

7

Make a CodePen of your model. We can take a look from there.

InstancedMesh is intended to create multiple clones (Instances) of the same geometry. So if you want to create 1000 copies of the same geometry, with the same material, and each one be an indexed child of a parent geometry, then InstancedMesh is what you want.

If you have 1000 different geometries that you want as children of a parent geometry, all using the same material, then you want a merged BufferGeometry (BatchedMerge).

After those 2 usecases it gets complicated.

1 Like
8

Thanks for the clarification!

I have the whole code in this repo: https://github.com/SamuelSub/threejs-demo