Camera framing behaviour not working perfectly for tall object

Hi everyone,

I have a piece of code that calculate the bounding box of a 3D object that has multiple child meshes, and use camera framing behaviour to fit the 3D object in camera viewport.
Most time it works perfectly. However I noticed if the 3D object is very tall, on a landscape viewport the top/bottom will be cut off.

I have setup this playground so you can check the issue by changing preview screen size.

I also have following screenshots for reference:

Landscape viewport
You can see the top/bottom is slightly cut off.

Portrait viewport
You can see the whole object fits into viewport with padding around, which is the ideal result I want.

At first I thought it’s line 116: camera.upperRadiusLimit = bbBoxLongestSide * 5 that sets a small upperRadiusLimit that prevent camera from zooming out. However even I changed the upperRadiusLimit to a huge number, it still can’t fit the whole object into landscape viewport :disappointed:.

I wonder if anyone knows how to resolve this issue?

Updates
Thanks for the help! Here’s working playground:

I used zoomOnMeshHierarchy as suggested, it’s working great now :+1:

You may have a look how it is done in Sandbox - Babylon.js/packages/tools/sandbox/src/components/renderingZone.tsx at 21e99e181d7649f7c170e10af23391fd4b097454 · BabylonJS/Babylon.js · GitHub

Also, you may use framingBehavior.zoomOnMeshHierarchy(mesh, focusOnOriginXZ?, onAnimationEnd?) or other similar functions - Babylon.js docs - to automatically calculate boulding box without the need to do it yourself.

2 Likes

Hi @labris

I have updated my playground: https://playground.babylonjs.com/#6FBD14#3477
I tried zoomOnBoundingInfo zoomOnMeshHierarchy and zoomOnMeshesHierarchy, weirdly they all focus to top of the object now. Did I miss any config?

I tried to set focusOnOriginXZ to true/false, didn’t help.

I believe you need to set the target for the camera.
camera.setTarget(mesh or Vector 3)

Thanks it’s working!

1 Like