Fill the whole scene with the model

we want to fill the scene completely with our model. the model should fill the whole scene. or say, they have the same dimension

It seems the Field Of View of camera can help but not sure how to work out the right FOV value with code.

the dimension of the white canvas is fixed: 2000x2000 in px

I’m pretty new to the 3D technology. any help would be greatly appreciated!

You should try the framing behavior:

Feels like it is exactly what you need :slight_smile:

1 Like

sorry, could you be more specific?
the white canvas is fixed and cannot be controlled btw

Maybe your camera is too far from the target. Provide a playground and soon someone will help you find the answer you want.

Thanks for your suggestion.
I make a simplified version at playground for your reference.
https://www.babylonjs-playground.com/#6FBD14#1193

basically, the box should be the scene. they have same dimension.

Fill the whole scene,I think there can be multiple answers.
Method for setting camera radius:
https://www.babylonjs-playground.com/#6FBD14#1194
Another method is setting scalling of box:
https://www.babylonjs-playground.com/#6FBD14#1195
Not very clear about the box should be the scene . Have you tried this?

hey @musk thanks for your reply

as for the “the box should be the scene”, I added a screenshot capture function
https://www.babylonjs-playground.com/#6FBD14#1196

I want to capture the gray box and resize it to 2000x2000, but unfortunately, the red background scene is captured too.

checking your playground now.

Here’s the key

https://www.babylonjs-playground.com/#6FBD14#1198
Am I doing it right?


but still same result.

so, I want to capture the gray box only.

yes, https://www.babylonjs-playground.com/#6FBD14#1199

fixed scaling number. hm, not sure if it’ll work for my situation. the canvas size is dynamic (user may resize the browser) and I have to check though

how do you work out the 1.8 btw?

I didn’t calculate. I have to admit that I didn’t think so much.This may require calculating a reasonable camera radius or scaling of box after user resize the browser.Just a crude example:
https://www.babylonjs-playground.com/#6FBD14#1200
Now let’s invite our outstanding friend to have a look (sry ,I am not good at math)
What about the camera behavior @RaananW mentioned ?
https://playground.babylonjs.com/#6FBD14#1201

1 Like

I will probably need you to be more specific if you want a more specific answer :slight_smile:

Want to create a playground with a model example? This way we can understand what you are referring to when you say that the scene is the red part, and the canvas is the white part.

Very impressive with babylon community and thanks for your kind help.
it’s sort of a problem to share the real code and the model varies.
https://www.babylonjs-playground.com/#6FBD14#1193
this playground shows the main idea. It’s required to take a screenshot of the model only (box in the example) but in fact the whole scene is taken.

1 Like

Do I understand correctly, that you want the model to cover all of the red part?
Is it always a box? is the canvas always quadratic? does it need to be full-screen, or is it ok if you take a screenshot of only the needed mesh(es) and ignore the others?

thanks for your help.
I finally find out that I should use ortho camera and set the left, top, right, bottom correctly then everything is alright now.

3 Likes