How do you "translate" a scene towards the right of the browser without changing perspective?

Questions
1

I have a regular globe visualization with a globe at 0,0,0 and an equally centered camera pointing directly at it. It’s a full width & full height visualization.

Everything is great… except now I need to “offset” everything to the right of the screen, so that the “center” is more like at x:75%.

And I don’t want to double the width of my threeJS project and use CSS to offset it, because then there will be a bunch of stuff being rendered out of view, which seems wasteful.

Is there a way to somehow translate/shift a scene within the view?

2

Hm. One option is to move the camera to the left. Or move the scene to the right (the scene is an Object3D, so it has position property). This might pop-up some troubles if you have camera rotations or orbit controls.

Another alternative is demonstrated in this official example – you can make a “window” inside the canvas and Three.js will render there.

https://threejs.org/examples/#webgl_multiple_views

image