Camera.fitAll() when setting up a scene coming from gltf import

Feature requests
1

Hello,

BabylonJS + its documentation + forum + team + playground is really amazing and great.
I am a newbie, but It took me really lots of efforts to setup a “simple” scene coming from a gltf import.

My question is :
Is there any way to use a simple feature like camera.fitAll();

Usually many samples are explaining:
scene.target = mesh;
But what if user has collection of meshes

For example the way I took is not that easy (2 days) to have https://playground.babylonjs.com/#U5SSCN#185 with a correct camera + light position by computing scene bbox and reacting in a “classic” way with mouse without inertia and stuff going out of my mouse or turning in a weird manner by default
Hopefully the library is so versatile that anything is possible. But its also very rich so finding how to tweak is not that easy for beginners

To conclude, that means the kind of sample (cleaned) would be very great to find for a beginner

2

Hey!

What about this: Camera Behaviors | Babylon.js Documentation

1 Like
3

Hi,

Many thanks for your time and answer

I can’t see anything about fitAll() features in documentation. Did I miss something ?

I tried the 3 samples in doc and then I tried in playground
About : BABYLON.FramingBehavior.FitFrustumSidesMode working
Althougth it works very well on cube sample https://playground.babylonjs.com/#6FBD14#2

It doesn’t in my case https://playground.babylonjs.com/#U5SSCN#187
Code changed are enclosed like below :

    // BABYLONJS FORUM ADVICE REMOVED
    //camera.upperRadiusLimit  = 20 * radius; 
    //camera.lowerRadiusLimit  = 0.2 * radius;
    
    // BABYLONJS FORUM ADVICE ADDED
    camera.useBouncingBehavior = true;
    // BABYLONJS FORUM ADVICE 
    camera.useFramingBehavior = true;
    camera.framingBehavior = BABYLON.FramingBehavior.FitFrustumSidesMode;
4

Does something like this go someway to what your suggest? Babylon.js Playground

See Scene | Babylon.js Documentation

5

Hi John,

Many thanks for your answer. In fact this is the very first way I tried.
You are right, this is very simple to have simplicity but

  • I need to control lights (for shadows)
  • I need to change some camera properties (wheel etc)

If I want to add a behaviour for end user like a mouse double click just set a camera.fitAll(), this is not possible by one API call only.

So I think this feature is a “classic one” or a “nice to have”.
Maybe there is a reason why it is not provided yet in BabylonJS. I ignore why.

6

Here is the example with your model loaded into Babylon Viewer which has a kind of “camera.fitAll()” by default - Framing testing – Babylon.js 3D WordPress Plugin
Is it closer to what you’d like to achieve?

7

Thank you. Yes it is much closer to what I’m looking for.
So fitAll() features exists somewhere inside BabylonJS viewer ?
And in your sample the framingBehavior seems to work.
It does not in my playground https://playground.babylonjs.com/#U5SSCN#187

8

The matter is that your model is not a cube but cuboid. Here is the PG with cuboid - https://playground.babylonjs.com/#6FBD14#716 , seems that it also works well.

Seems that you just need to set the correct target for the camera and, probably, radius and limits.

9

I also remembered that I created recently the similar PG for our book: https://playground.babylonjs.com/#UKNERM#283
with static BG - 1001 Minutes – BabylonPress

10

To be very close to your sample with one box only, I tried to set camera.target = bbox; where bbox is red transparent below
image

I still have same issue, the camera is going iniside the meshes
This code has no effect
camera.framingBehavior = BABYLON.FramingBehavior.FitFrustumSidesMode;

https://playground.babylonjs.com/#U5SSCN#188

Anyway would it be the best trick by creating a bbox and setting its material alpha to zero ?

And, if I do not set camera.position = lookFrom; things are worst

11

Let’s simplify all things - https://playground.babylonjs.com/#6FBD14#719
Is it OK?

It will be easier if the transform node will be at the center of the model, not at it’s side as it is now

image
image864×778 40.9 KB

12

Thanks for all your replies,

Ok, to do what you are suggesting, I would also need to compute scene bbox and change the origin of model. Which is like setting camera (lookAt, lookFrom) from bbow. When you have scene bbox from meshes. That means fitAll() must be implemented by user.

There is still something weird in my sample here
https://playground.babylonjs.com/#U5SSCN#187
Why the sphere at the center of the scene (= center of scene bbox) does not move when camera is panning ?

13

If you’ll change mesh origin you won’t need additional box, I presume.

Seems that the sphere doesn’t move just because it is in the center.

image
image512×512 40.6 KB

14

Hi Labris,

I am sorry, I see no reason why an object should “stay” static when camera panning is done
Normally pannig is like a travelling operation in movies with a camera
So all objects should visually move, indeed the camera frustrum does
I hope panning does not affect the model position and it does a translation of model instead of moving camera frustrum
Did I miss a concept I’m not used too ?

image
image829×640 169 KB

15

Your sphere does not move because you set its position to lookAt (sphere.position = lookAt), which is also the target of the camera (camera.target = lookAt). So, sphere position and camera target are always the same, so the sphere does not move on screen. Set the position of the sphere to lookAt.clone() instead.

You also have a bug here var material = new BABYLON.StandardMaterial(scene); where you should pass the name of the material before scene: it makes the inspector crash when selecting the center mesh.

Corrected PG:

https://playground.babylonjs.com/#U5SSCN#189

2 Likes
16

I did not know there was some variable passed as “reference” like in C# in Babylon (typescript).
So cloning position seems very logical…and solve the “issue”

Many thanks !

17

Thank you for your time.