How camera fit object to left half side of the screen(width and height)

[Tiffany]

Hi,

After clicking the button, I want the whole 3D object(width and height) to fit to left side of the screen and show a div HTML info in the right side of the screen.

How to fit object to left side of the screen without changing camera.fov? Is it possible to set margin(px) like the following picture?

Here is the fiddle.

Thanks!

[Mugen87]

/cc

Three.js How to fit object to left half side of the screen(width and height)

[blackstrings0]

Perhaps a layout would help others. I can see a few ways but not sure exactly. like for example A or B.

[Tiffany]

Hi @blackstrings0, example A is what I want. Thanks.

[trusktr]

Here are some functions to fit objects within a view using a few lines of trigonometry math:

Functions to calculate the visible width / height at a given z-depth from a perspective camera

In case it helps anyone, here’s how to fit an object (most likely a flat plane) on the screen so that it “fits” depending on aspect ratio. For example, if we have an object taller than it is wide we want the Y dimension (the tall dimension) to fit within the view, but if the object is wider than it is tall we want the X dimension (the width dimension) to fit within view. The following distanceToFitObjectToView function will tell you at what distance to place the object so that it fits within vi…

You could tweak those functions to operate on half of the view instead of the full view.

[devspeter]

Just in case anyone looking for this I found a solution too for “A”

this.camera.setViewOffset(window.innerWidth * 1, window.innerHeight, window.innerWidth * 0.25, 0, window.innerWidth, window.innerHeight)

That’s all after the PerspectiveCamera (maybe play with the numbers + - )