How can I resize my scene to be 100% of the window's width when its browser resized to a smaller size?

Questions
1

Hi all,

I have my onWindowResize() method working, but how can I make my scene to fit 100% of the width of the screen? (is it possible)?

This is how it looks like on “full screen”

Screenshot 2020-04-07 at 08.28.16
Screenshot 2020-04-07 at 08.28.162560×1370 394 KB

And when i make the browser smaller, it does get smaller but only until a certain extent:

Screenshot 2020-04-07 at 08.28.07
Screenshot 2020-04-07 at 08.28.072208×1380 365 KB

How can I make the scene’s width to be 100% of the browser’s width? Is that even possible?

Thanks a lot!!

1 Like
2

You can use the onresize-Event of the window-object.

window.addEventListener(“resize”, () => {
onWindowResize(); // your function?
});

In the onWindowResize you should rescale the renderer with renderer.setSize(width, height). You can read the containers height and width with js properties like container.clientHeight or container.clientWidth.
Container is that element, you put the renderer.domElement in before. You should give the container a css of (for example) “width: 100vw; height:100vh;”

Careful: The window.onresize is called pretty often, and maybe you just want to resize at the end of that small imaginary “call-stack”. To achieve that, you can use vanilla js, like explained here.

1 Like
3

Hey @VForsmann, thanks for your reply.

This is my code for onWindowResize()

function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

			render();

		}

It’s working but only if I resize the window height (as well as width):

Screenshot 2020-04-07 at 18.29.00
Screenshot 2020-04-07 at 18.29.001440×856 218 KB

My question is, how can I make the scene also fits 100% only when the window’s width is changed, and not its height? So maybe the scene should get smaller proportionally? Is that possible?

Thanks!

4

Hey!

I’m not 100% sure I get your Problem - but I’ll try.

I think I understand that you always want to align your 3D scene with 100% of the window width. That means it should never be possible to scroll horizontally.

But on the screenshot I can see something else.
I have created a fiddle for you that reproduces such a behavior.
For this purpose your function has now the parameter “justAdjustWidth”, if it is set to “true”, the initial height will always be kept.
If you also like to test with “false”, then you always have 100% width and height.

You should also be sure to kill the body’s margin, like you can see in my fiddle.

I hope I could help you. If I still did not understand your problem, I am sorry.

5

When you set camera.fov, it locks the vertical field-of-view angle. For instance, if you set the fov to 45-degrees, resizing the browser vertically will shrink or stretch the content so you always see 45° vertically. This will give you a variable horizontal angle, so you may see cropping to accommodate this fixed vertical 45°.

You might be tempted to write an equation that flips this behavior, so the fov angle is locked horizontally, but that means you’ll get problems with a vertical crop. Instead, you might want to use this approach, which uses some trigonometry to make sure the object is always visible within the camera’s frustum:

1 Like