So, you know how changing the height of the canvas will scale in the content (scale the camera?) and keep the object in the vertical bounds, however this isn’t the case when you change the width of the canvas. Eventually you’ll be able to crop the scene. I get that this is natural, what I’m trying t…

Yup! Managed it! Actually I just reversed a snippet that I used for this: [image] Responsive renderer with limits Questions How can I resize the renderer (or the camera) in order not to see the unwanted parts of the scene? I want to achieve exactly the same e…

Actually I think my brain worked it out, what you really want to do is have CSS responsive breakpoints that adjust the height of the canvas itself, no need to mess with the scene

is this similar to background-size: cover in css? if yes, you can calculate it like this: const v = ... // viewport const aspect = size.width / size.height const adaptedHeight = height * (aspect > width / height ? v.width / width : v.height / height) const adaptedWidth = width * (aspect > …

Thanks mate, thats really helpful, and you’ve highlighted the ease of relating it to a background property. The property I’m actually trying to replicate is contain Imagining that the square image in that pen is an object in your scene. Notice how a scene will automatically follow this behaviour …

Thanks @felixmariotto , I did try @looeee ’s script provided, it did a great a great job at centering toward the object, however it didn’t dynamically zoom out to keep the object in the view (without cropping) at smaller screen sizes, but I didn’t read the entire post so I may dig deeper into it

@kylewetton did you check my updated pen here?

I totally get what you want. I want the same. Actually, as far as “3D at the service of the web” is concerned (and not “web at the service of 3D”), it’s a crucial feature. Because we need our 3D scenes to be responsive, and some objects should remain in the viewport whatever its size. I’m also bui…

Ok, I start to have an idea. Let’s say that our canvas takes the whole viewport. We’ll call the red zone the “plane”, and we’ll assume its aspect-ratio to be 4 / 3 (I know it’s not, but shush…). We have two scenarios: The window.innerWidth is too large or the window.innerHeight is too small ; T…

@nagman Cool! This is just like overscan, really cool, this should be a core functionality "THREE. perspectiveCamera({ overscan: true});

Legend! Sorry about the slow reply I just saw this. Well done mate

Keeping an object scaled based on the bounds of the canvas (really battling to explain this one)

Questions

felixmariotto August 2, 2020, 8:03am 5

Is it related to this ? In this topic there is solutions to move the camera back and forth to fit an object in screen space.

Topic		Replies	Views
Responsive renderer with limits Questions camera	25	8851	March 30, 2021
[Solved] Fitting an object to cover the whole canvas a la CSS `object-fit: cover` Questions geometry , camera , perspective-camera , canvas , zoom	9	3671	July 17, 2023
How to make camera adapt to different screen size. (responsive camera) Questions camera	8	1908	February 29, 2024
How to resize canvas without resizing renderer or scaling contents? Questions resizing	18	28423	May 12, 2018
How to render my model the exact same size, on different canvas sizes? Questions	4	841	May 7, 2024

Keeping an object scaled based on the bounds of the canvas (really battling to explain this one)

Related topics