Adjust camera Z dynamically with canvas updates

tawibox · April 17, 2024, 9:44pm

Hey community,

Just wondering, is there a way to change camera Z translation (or arcRotateCamera radius equivalently) dynamically based on canvas size?

For example:

I have an animated camera imported from a gltf file. I hope except for the close-up shot, the entire teapot should be always inside of canvas framing.

Otherwise, if I change the canvas width and height, the render will look like this:

You can see the left and right are cropped and out of canvas frames.

What I want is very similar to this feature:
https://doc.babylonjs.com/features/featuresDeepDive/behaviors/cameraBehaviors#framing-behavior

Just a way to keep mesh always inside of frame.

Many thanks,
Tawibox

Evgeni_Popov · April 18, 2024, 8:45am

You could take model on how it is done in framing behavior?

github.com

Popov72/Babylon.js/blob/master/packages/dev/core/src/Behaviors/Cameras/framingBehavior.ts#L315-L389


      
          public zoomOnBoundingInfo(minimumWorld: Vector3, maximumWorld: Vector3, focusOnOriginXZ: boolean = false, onAnimationEnd: Nullable<() => void> = null): boolean {

              let zoomTarget: Vector3;

          

              if (!this._attachedCamera) {

                  return false;

              }

          

              // Find target by interpolating from bottom of bounding box in world-space to top via framingPositionY

              const bottom = minimumWorld.y;

              const top = maximumWorld.y;

              const zoomTargetY = bottom + (top - bottom) * this._positionScale;

              const radiusWorld = maximumWorld.subtract(minimumWorld).scale(0.5);

          

              if (focusOnOriginXZ) {

                  zoomTarget = new Vector3(0, zoomTargetY, 0);

              } else {

                  const centerWorld = minimumWorld.add(radiusWorld);

                  zoomTarget = new Vector3(centerWorld.x, zoomTargetY, centerWorld.z);

              }

This file has been truncated. show original

tawibox · April 18, 2024, 2:05pm

@Evgeni_Popov

Ah thats a great point. Thank you! I will look into it!!

Topic		Replies	Views
Can't change camera properties when importing glTF Bugs	5	1029	February 20, 2019
Set the camera's viewport to fit the size of the object Questions	6	2416	September 3, 2021
Need Help with Custom ArcRotateCamera in 3D Scene Questions	6	153	January 11, 2024
Turn off FramingBehavior while animation of camera? Questions animation , camera , arcrotatecamera	2	239	December 6, 2023
Offset camera center relative to canvas Questions camera	8	959	September 30, 2021

Adjust camera Z dynamically with canvas updates

Related Topics