Make model fits into a box

Hi guys,

This time I have a tricky one for you. My problem is simply explained: I want to put an imported model into a box. But as models always have their own very specific parameters, I just can’t get it working.

Here is my approach:

I check the boundingBox of every meshes from the model in order to determine the size and the center of this group of meshes. Then I scale it and move it so that it goes in the boundmesh. It seems pretty simple but I really can’t find the right formulas to make it work whatever the model! :sleepy:

I made a playground with two models, one which works (a pretty simple sphere icon) and one which don’t (two separated shoes, you can see one shoes goes outside the boundmesh):
Check the “meshgroup” class which I use with my comments!
Thanks for your help! :face_with_monocle:

1 Like

Ok I manage to put a word on what I am looking for.

And … wait for it … this is a “shared boundingBox”!!! that I am trying to reproduce here actually.

And just by saying it I feel that there is a way to do that in BABYLONJS better that my meshgroup class?

I could reformulate my problem by: Is there a way to show boundingBox of a model containing several meshes?

1 Like

I found a playground doing exactly that but with the children of a parent mesh where it is working:

But when I apply that exact function with my model, still not good:

What about that little function?


Yep looks promising :

I will run tests to see if it works with other model. Keep you in touch! :wink:

1 Like

So the good news is that this is better, the scale is always good now.

But for the center position, it is still not always working. For instance I have this model which won’t be correctly centered based on the minimum and maximum:
My function to get the center of all meshes is pretty basic:

let sum = this.maximum.add(this.minimum); = sum.divide(new BABYLON.Vector3(2, 2, 2));

And the weird stuff is that if I reverse the y et z position value, the model is almost centered. Maybe there is a rotation which I must check and use also?

well the center should be =min + (max - min) / 2 so your equation seems off to me

Yep and if you do the math: min + (max - min) / 2 = (max + min) / 2

You made me afraid I had to go back to school haha! :wink:

omg lol! yeah :slight_smile:

so back to your PG what is the problem>?
Yes so the scale of the group is now right and it fits in the parent cube.

Now I need the group to be inside the cube. To do that I get the center of the group (getcenter function line 84) and I subtract all the mesh position in the group with that center in order to push them in the middle of the cube (setMeshRelativePosition function line 80) but it isn’t working.

And the weird part, otherwise it won’t be funny, is that if I exchange the y and z values in meshes position, it seems to work. So it make me think it could be related to a rotation or this is just a coincidence.

So in your case your center is wrong actually because you are not taking the scale in account.
your object has a parent which reduce the overall scale but your min and max where computed BEFORE that scale happens (with a different hierarchy then)

You should rebuild the min/max after the scale is set to get the right value

Thanks, I tried reseting the min and max after the scaling has been done.

And it works with the shirt model, the model is in the box but not perfectly in the center. So I tried with another model and this one is still not correctly centered:

Note that to make the shirt work I divide the center position with the scale vector

I decided to center the meshes before scaling them so that I won’t have to rebuild min and max.
And I have got the exact same result as before. So problem not solved yet but at least code optimized! :wink:

Hoooooooray! :tada:

Found what was the last issue. I just thought about this other righthanded model subject (here: Models are reversed when put in a parent) and realized thta if the scale was reversed, then the position should too!

So when I set the center, I just take the negative value on x and y axis as for the scale this is the z axis which need to be negative and BOOOOM, it works!

Thanks @Deltakosh for leading me to the solution! Here it is:

1 Like

hello, I have seen your playground, the truth is very good, but I need to consult a question a little bit deep, that is, if I have hundreds of scene model, all need to add the bounding box, so this seems to be the need to you give him this is the position, so it is not very convenient, and is not the same as the model size is also different, so, I should be in your example on how to change
I refer to your case, I want to give me the scene of each model and bounding box, I saw you write example, there are lots of places are used to showBoundBox, since is the bounding box of his own creation, why use the bounding box of the model itself, secondly I want to give me of the scene every model to add the bounding box, I should be how to modify your code?

Hi @ranwei-001,

I am not sure to understand what you want to achieve and your issue. But I will try to answer:
My goal was to make any model perfectly fit into one cube, whatever the number and size of meshes in the model. But I couldn’t use the bounding box of the model itself because I had to change the main parent model and when you import a model in babylonJS, you get the list of the meshes in it, not the root mesh.
To be honest, my last updates on this issue was to find the root parent of the model imported and use it but I still check every meshes bounds in order to have correct model size and model center in order to fit it into my cube.

I know what you said, but I read what you wrote, it seems that you need to set the location for him by yourself. If there are few models, it is acceptable, but I need to load hundreds of grids, so I cannot manually set the location for him

This is my scene. The function I need to implement is that when I click on any floor, it can find the current floor through collision. If there is any other model on it, it can hide it