ArcRotateCamera always in the center of the mesh, but mesh on different positions on canvas

Questions
1

Hi.

So I am not sure is this possible. On the other hand it might be really simple but I cannot see it.

What I would like to achieve is this.

  1. I want to have canvas element over the full screen height and width (so 100% both). OK got that

  2. I want to be able to orbit around the mesh properly (so the target is in the center of the mesh) OK got that.

  3. But I would like to be able to have mesh anywhere on the canvas (so anywhere on the screen, see image). But wherever it is I want rotations to behave the same way (so target is still in the center of the mesh, and I rotate around that mesh).

Screenshot_1
Screenshot_1.jpg831×802 64.4 KB

https://playground.babylonjs.com/#L4BACB

Thank you.

2

camera.target requires a Vector3 ArcRotateCamera - Babylon.js Documentation

camera.lockedTarget requires a Vector3 or a mesh.
https://doc.babylonjs.com/api/classes/babylon.arcrotatecamera#lockedtarget

Use
camera.lockedTarget = box

3

Okay. Thank you. But that’s not my issue I believe.

As I said, I want to be able to move box around the whole canvas (change position), but whenever I click to rotate I want it to rotate as if target is in the center of the mesh.

At the moment, when I change position of the mesh, it still stays in the center of the screen (which is understandable of course), but I want it to be positioned let’s say all the way to the left of the canvas (screen)

4

If I for example, don’t lock target to the mesh.

https://playground.babylonjs.com/#L4BACB#1

So I want to move box to this position let’s say, but I want that rotation is around center of the mesh. Not offsetted like in the example above.

5

Oh, I just found this

camera.targetScreenOffset.

This is exactly what I needed.

https://playground.babylonjs.com/#L4BACB#2

3 Likes