Keep object or entire scene in frame at all times

Out of curiosity I was wondering how I could keep a target (or better yet everything in a scene) constantly in view no matter how the scene changes?

ie. if I have a sphere A at 0,0,0 with a radius of 20 and I add sphere B at -50,0,0 with the same radius I’m hoping that the viewport will have the left tip of sphere B at the very left edge of my screen and Sphere A’s right tip on my viewports right.

Right now I’m using an ArcRotateCamera.


I guess you want that:

Oh man, yeah that’s pretty much exactly what I needed. Sorry about that I would have found it myself if I looked through these docs. Looks like they were updated recently too.


1 Like

@Deltakosh your suggestion really saved me! I managed to get exactly what I needed implemented BUT there’s some weirdness happening I don’t fully understand despite reading the docs.

Here’s a screenshot of what’s happening:

I have an ArcRotateCamera setup as such:

  this.cameraDefaultPosition = [ this._camera.alpha, this._camera.beta ];
  this._camera.useFramingBehavior = true;
  this._camera.framingBehavior!.defaultElevation = 0;
  this._camera.framingBehavior!.elevationReturnTime = 0;
  this._camera.framingBehavior!.elevationReturnWaitTime = 0;
  this._camera.framingBehavior!.framingTime = 0;
  this._camera.framingBehavior!.radiusScale = 0.9;
  this._camera.upperRadiusLimit = 200;
  this._camera.lowerRadiusLimit = 0;
  this._camera.upperAlphaLimit = Math.PI * 2;
  this._camera.lowerAlphaLimit = Math.PI;

In the video I’m demoing how the camera is behaving. I don’t want any animation enabled as I’m just using the positioning component. My “frame” or artwork exists at 0, 0, 0 at all times. I then position a wallpaper behind it, position it then use zoom to focus on the frame components.

I have to position the wallpaper below the artwork and position the camera at the correct spot then trigger the zoom as such:

  this.wallPaper = MeshBuilder.CreatePlane('WALL', {
    width: width,
    height: width * 0.51
  }, this._scene);
  this.wallTarget = MeshBuilder.CreatePlane('WALLTARGET', {
    width: width * 0.75,
    height: width * 0.51
  }, this._scene);
  this.wallTarget.visibility = 0;
  this.wallTarget.position.z = 1.25;
  this.wallTarget.position.y = -20;
  // Add material for the wallpaper
  const material = new StandardMaterial('FM', this._scene);
  material.diffuseTexture = new Texture(url, this._scene);
  material.diffuseTexture!.hasAlpha = true;
  material.useAlphaFromDiffuseTexture = true;
  this.wallPaper.material = material;
  this.wallPaper.position.z = 1.25;
  this.wallPaper.position.y = -20;
  this._camera.setPosition(new Vector3(0, -30, this._camera.position.z))
  this._camera.framingBehavior!.radiusScale = .5;
  this._camera.framingBehavior!.framingTime = 0;

The above code is triggered when I click on the room view icon. The environment loads with a bit of an angle on the camera. When I actually click on the canvas/environment for some reason the correct orientation kicks in. I’m trying to ensure the room is not skewed at all.

I’m not familiar with this camera behaviour so I’m at a loss for why it’s performing this way.


Hello unfortunately this is not easy to help with just a video

can you repro the problem in the playground (with random meshes,we just want to focus on the framing tool)

Furthermore I cannot see the video :frowning:

That screen capture service sucks so bad. :-/ Here’s a proper link: 20201118_041651642.mp4 - Google Drive

Sorry about that.

Yeah I usually provide a playground link. This one is far more involved and will take me a bit to recreate. I’ll try and do it tomorrow but perhaps just the video will trigger some thoughts.

Basically I’m wondering if the camera behaviour has any actions on click that could possibly be doing this. My ArcRotateCam doesn’t do anything strange except for this behaviour. I have no idea where this click action is coming from and I can constantly recreate it (as seen in the video).


The camera is not tracking any click :frowning:

If you can find a simple repro I would love to help

So I didn’t think so. I think this is a symptom of something else but having a heck of a time tracking it. Let me spend some time tomorrow recreating it in a repro. Obviously if it works properly in a playground sandbox then I’m obviously having app specific trouble. I’ll get back to you shortly hopefully soon.

Thanks for your willingness!

1 Like

Of course!

Haven’t forgotten about this, just busy trying to get a production release out the door. Sigh. hehe.

1 Like