Moving the whole renderCanvas off-center content without cutting off borders

I am using a simple 3d Model display with an ArcRotateCamera.
By default the whole contents is centered within the window.
Now I would like to basically just move everything in the window 500px to the right.
When I use css with “transform: translate(500px);” I get the desired result but the the canvas is obviously cut off on the left side.
What would be the way to do this within the BabylonCanvas?
I would like to keep all camera and interaction angles the same as it is in the centered version.

Thanks a lot

Hello! You want the canvas to move, but the object that is viewed through it to stay fixed on the screen, like the canvas is a “window” through which the object is seen? Like this?

I think that this can be achieved by applying the inverse transformation to the camera’s target in world space, so, if you move the canvas 500px to the right, you have to transform the target to the left to the equivalent of 500px in world space.


well, my goal is slightly different :slight_smile:
This is the first state

Then everything gets moved by 500 px to the right:

Does this make sense?

Are you looking into the camera targetScreenOffset property ? Babylon.js Playground

Which element are you applying this to?

Thanks. That looks very promising. Will investigate.

I apply this to “canvasZone” and “renderCanvas”

Here is a rough version using the Babylon Viewer it might help you.

Code at Tiled/moveCanvas.html at master · BabylonJSGuide/Tiled · GitHub

Hello John.
This is not was I want to achieve. as the text is no overlay to the babylon canvas.
I guess targetScreenOffset might be the solution.


hello master sebavan.
I am trying to find some intel on targetScreenOffset.
Can’t find it in the API.
Is it a new or undocumented feature?

Available here ArcRotateCamera | Babylon.js Documentation

1 Like

Hello @EvilTwinsNiceBrother just checking in, was your question solved? :smiley: