I was hoping to display in my app as many as 3,000 instances of the same model at the same time - but it’s really slowing down my computer. It’s just too much.
InstancedMesh is the way to go for something like this so I’ve been following THREE.js’s examples here: three.js docs
The examples are fantastic, but they seem to use really small models which makes it really hard to get a good feel for what the model size-limits should be.
-The Spheres used here aren’t imported custom 3D models, they’re just instances of IcosahedronGeometry
Flower.glb model used in this example is tiny: it only has 218 Vertices on it.
-And the “Flying Monkeys” here come from a “.json” file so I can’t tell how many vertices that model has.
My model by comparison has 4,832 Vertices - which by the way, was listed in the “low-poly” category where I found it, so it’s not really considered particularly big.
In terms of file-size, it’s exactly
I tried scaling it down in Blender and re-exporting it - still came out at
Obviously I can take some “drastic measures”, like:
-Try to re-design my 3D model and make it smaller - but that would greatly reduce it’s beauty and the overall aesthetics of the project
-I can re-imagine or re-architect the project to display maybe 1,000 models at the same time instead of 3,000
But being that I’m new to THREE.js - and 3D modeling in general, I just wanted to first ask the community if there are any suggestions or tricks to try out first before making such radical changes.
-The model I’m importing is in the
.glTF format - is that the best format to use or should I try something else?
-All the meshes in it come into the browser as instances of
BufferGeometry which I believe is the lightest in terms of memory demands - is that correct?
Are there any other things I need to be aware of to optimize performance?
Some setting in
Blender or other 3D modeling software that can reduce model-size?
Some general rules of thumb to follow when embarking on something like this?
Would really appreciate any and all help.