How can I use InstancedMesh to create 1000 groups with multiple child meshes and ensure their location

Questions
1

I once correctly created 1000 monkey head models (the model is a mesh), I used THREE.InstancedMesh to expand the number to 1000 and set the positions for them, as shown in the figure:

image
image1920×937 139 KB

When I switched to a mesh generated using svg, it didn’t show up. I had expanded 1000 of them, but I didn’t see any

image
image1920×937 321 KB

Is in the rotation, you can see some effect, I guess the position is not set correctly, but I do not know how to deal with it

image
image1920×973 139 KB

This is my sample code, I hope the community friends to help see, thank you! :sweat_smile:

2

you normally can’t, three.instancedmesh needs a single buffergeometry and a single material. turning multiple meshes into a re-usable instance is manual work. instancing a svg, are you sure that’s what you want to do? wouldn’t it be better to store the shapes in a glb?

since you’re using react, there are a couple of helpers that make this possible:

drei/instanced and drei/merged GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

also, if you’re dealing with models that you want to instance, gltfjsx