Obj load vs geometry + max vertices

Hi guys,

I could need some help and advice.

I would like to build two big geometric structures that morph into each other.

Now I wonder:
a) Should I build and animate them externally (eg. Rhino) and then load them into three.js, or if I should use the three.js geometry / mesh generating functions.
→ I understood if I create my object in Rhino and then load to three.js in glTF, it is basically the same as creating them within three.js as the data points are saved the same way?
I feel animation may be easier to do in Rhino.

b) Do you have experience with how many vertices I can load without the experience crashing on an averade computer? I mainly have this big animated object, and some simple lighting (if possible render wise I would like the object to be reflective at some moments), maybe 3 smaller object and some sound (not sure yet, how to implement the sound).
I try to get an idea, how big / detailed I can build. I know there are a lot of factors, but I am sure someone with more experience will have helpful thoughts on this.

Thank you very much :slight_smile:

I would say it’s best if you start with this workflow since you don’t have to build the morph animation with three.js and thus save a lot of code.

That’s hard to say since it really depends on the device. And even then it depends on a lot of other factors like how expensive are the materials you are going to use. It’s best if you just start with an initial setup, check how it goes and optimize if necessary.


Answer to this question, in 99% of cases, is “if that’s and option, then yes”. Code animations only when it gives you any significant advantage - for example morphing is dynamic, can be adjusted by the user to create different outcomes etc. Otherwise coding animations is (1) hard (2) time consuming (3) possibly and overkill.

Meaning of this word changes every 6 months whenever new hardware comes out or old one becomes cheap, so it’s hard to say. If you plan on showing the entire geometry all the time, without any kind of optimization / LOD / submeshes - best keep it below 20-30k to remain at 60fps; below 50k for 30fps (including UVs and normals for each vertex; tested with basic material on mobile and older MBP, you can test yourself here.)

Hi Mugen87 and mjurczyk,

Thank you for your helpful answers!
And thanks for the link mjurczyk.

I know this really depends on details and is hard to predict, but thank you for your answers.

I guess LOD is the way to go, I was not aware there was a seemingly relatively easy way to do that in three.js (lets see) :slight_smile: I really like three.js. Thank you for the numbers which give an estimate.
I thought maybe the application runs faster, if it is coded within three.js but the way I understand using the load function the data is converted into something that makes a lot of sense for three.js and animating externally reduces possible bugs and is easier.
And yes, I do not want people to interact with the object, luckily :slight_smile: