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

Questions
1

Hello,
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

2

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?

diagram
diagram960×397 4.21 KB

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.

3

Hello,

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

ExampleA
ExampleA1920×1080 95.5 KB

Then everything gets moved by 500 px to the right:
ExampleB
ExampleB1920×1080 109 KB

Does this make sense?

4

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

5

Which element are you applying this to?

6

Thanks. That looks very promising. Will investigate.

7

I apply this to “canvasZone” and “renderCanvas”

8

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

https://musing-joliot-0f7a2f.netlify.app/movecanvas

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

9

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.

Cheers

10

@sebavan
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?
Cheers!

11

Available here ArcRotateCamera | Babylon.js Documentation

1 Like
12

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