How babylon sanbox centers the model automatically

Hi, I am new to babylonJs I am building an application that renders the model on upload, there are a few cases where the model is not created in the center. Since it is an open platform like sandbox I cannot center the model manually so how to bring the model to the center after it is uploaded

Thanks

Hi. I offered a solution to this in two other threads.

This one will lead you to the other one :smiley: Try reading through it and you should be able to figure it out. If you have some issue let me know and I will look into it, but solution is pretty much in copy/paste state, so you should be fine. At the end of the thread posted bellow you will find working playground where I implemented the solution, in the thread linked to thread bellow you will find step by step explanation (hopefully) on what’s going on.

@sebavan What do you think about putting this into a out-of-box method into code base, as it is becoming a recurring question and it might be useful to have it. I can try to create a PR for it in couple of days when I find time.

1 Like

Hi Thanks for taking out sometime, I tried the solution in which we build the parent box but for me its not working correctly.
Few things to mention

  1. I am using react-babylon
  2. Loading model using Model component

I am not too sure if that would make any difference.

Update: whenever I try to set the parent of new meshes the model disappears :')
github: GitHub - ishanjirety/3d-renderer-babylon

Thanks

How are you setting the parent? Using mesh.setParent(parent) or using mesh.parent = parent?

It’s really hard do say what’s going on without more insight. Have you calculated bounding box properly and assigned it to the mesh? Try going into the inspector and show boundingBox to see how it looks (or set mesh.showBoundingBox = true)

I haven’t tried this approach using react babylon, but you should be able to do the same.
But I believe it should be something like

<Model
  onModelLoaded={(loadedModel) => {  
    // go through the process mentioned above 
  }}
/>

I am able to see the bounding box its perfectly visible the new parent box also appears in the center but when setting up the mesh.setParent(parent) the model disappears
and the bounding box is being calculated properly I totally understand its quite difficult to debug without the code in front I have uploaded the code on Github.

If you get time please do check it out and thanks a lot :slight_smile:

Ok. Didn’t quite get it to 100%. I am still having some offset on SOME models I’ve tested with. Some are not being completely centered but some work as intended. I don’t have more time at the moment, will look into it a bit later if you don’t figure it out. For now, couple of stuff:

  1. You are using scene.meshes in calculations, which means that not only the meshes from loaded model will be included in calculation but meshes from your basic scene setup will be included as well (so, ground plane, and what else you got in it). So you need to use “newMeshes” instead of “scene.meshes”

image

  1. Don’t set es.scale(4), that means you will get the values which are twice the size of the actual size. you need to use es.scale(2). You probably missed this during testing.

  2. You are using this “scaleToDimension” and I am not quite sure why, but this scales the model, and you already scaling it with normalizeToUnitCube (it scales model to 1x1x1 space). So you need to remove this. If you really need to have this, then you need to somehow compensate for this scaling during calculations. Otherwise your model will probably appear much smaller.

Basically the logic in that case is => you scale model to 1x1x1, and then you scale it with this prop to even smaller or bigger size, which will bring you to inconsistencies in model size.

image

Leave parenting as is, as it wasn’t the source of the problem.

I think that should be it. Didn’t touch other stuff.


This indeed helps a lot but I am still not close to it I tried cloning your playground and tried testing it too which gave a kind of the same results but looking forward to your response. do check it out whenever you get time.

Thanks a lot for your assistance

Did you follow the instructions above? Replaced scene.meshes with newMeshes? That was the biggest issue. And scaleToDimension prop, which I removed on my end. After that I’ve tested everything with your code, with several meshes and it worked pretty much as intended.

Hmm. Can you send me the model you are testing with? Which format are you using.

Yes I did change scene.meshes to newMeshes and removed scaleToDimension prop
I have also added the model in the repo.

Worth a look at using scene.createDefault…

example pgs here The Meshes Library | Babylon.js Documentation

2 Likes

I could add a ‘centered’ prop, but it would only apply at load time only. Future updates to position/scale would not maintain centred ?

How does that work ?

hi @Ishan_Jirety
In your example you pass your center props to Model position props. Proposal would be to add a prop to Model called center to center the model automatically at a vec3. It would need to take into consideration the scaleToDimension prop and it would only center onload (same as other props that are only applied during load). Supplying position prop would invalidate center.

  return (
    <Model sceneFilename={props.sceneFilename} center={Vector3.Zero()} />
  )

I do my bounding info here and also scaling, so it would be good place to encapsulate centering logic.
react-babylonjs/loadedModel.ts at master · brianzinn/react-babylonjs (github.com)

Looks like you have some models that make good use cases - perhaps we could make a code sandbox with those models to test this new feature out? This could serve as a starting point:
floral-water-els13w - CodeSandbox

Also mesh.setParent(parentBox); may not be doing what you expect - It will maintain current position and parent. Believe mesh.parent = parentBox would parent and position of mesh would be then relative to parentBox. I may be off there, but that’s how I recall from earlier versions at least.

Cheers.

Having that prop would help a lot I saw the code sandbox and would like to contribute.

can you fork that sandbox and put in models for testing? looks like you have a teddy bear from the image that’s not centering!