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 effect as this website . I’m already using this: const {width, height} = canvas; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(w…

The example you’ve posted seems to be working with an image, you seem to be working with a mesh. They have the width and height available to them and can apply it to logic. You don’t have that, and only have height basically by setting camera.fov. What you need is something that relates to both tha…

I understand but I wasn’t talking about resize handler, that you can still improve, check camera.aspectratio and renderer.setsize, you should find some useful post on stack overflow. Anyway I give you an example, I have a 3d scene in which I draw rectangles to cover the screen, from left to right …

Do you think that’s how they achieved the distortion? I can see it’s somewhat of a dense mesh but i couldn’t yet figure out what it was, I’m still trying to figure out how spector js works.

The other thing is both the foreground and background have displacement maps, which would also be used for the 3D. Soo mapping the textures to planes (like PlaneBufferGeometry) and using a displacement map (GPU side texture) to give them depth. If you are feeling brave you can unminify the source co…

@calrk I’m suprised that the website is done with Pixi. I was convinced it was 3D. I tried your solution and it does part of the job (I don’t see the left and right borders of the scene), but instead of scaling the whole view (like you’d do in photoshop), I does a camera-moving-like stuff: [tes2t] …

It seems to have something to do with renderer.setViewport, or maybe renderer.setScissor, but I’m not sure. I’ve started something which is I thing the right approach: function onWindowResize() { const width = window.innerWidth; const height = window.innerHeight; const optimalRatio = 16/9; …

What I don’t understand is if @nagman 's texture/3d object has a fixed size that he can choose. Because if it is, when he creates the object he can sets its width and height as screen’s ones. This way, when he resizes window from shrinked to wide, the texture/image gets to its original size ( as scr…

@ThoughtsRiff I do use a perspectiveCamera, and this is why I cannot just set the size of the object. It shouldn’t be that complicated. It is exactly the same effect as a simple object-fit: cover; in CSS, or a background-size: cover;. Three.js should have something like “stop rendering everything …

Are you able to post the full sample code you are working with, including the model?

Ouch, kinda hard because it is in a Next.js environment, but I can try.

@pailhead THANKS!!! You’re my savior :grin: I’ve not understood everything, but my first test is a succeed! I was thinking that playing with the fov would influence the perspective, but no.

Responsive renderer with limits

Questions

nagman March 30, 2021, 8:52am 26

It’s been a while now, but here’s another topic that explains better the responsive issue and the solution : Keeping an object scaled based on the bounds of the canvas (really battling to explain this one) - #10 by nagman

Topic		Replies	Views
Keeping an object scaled based on the bounds of the canvas (really battling to explain this one) Questions camera	14	19485	January 12, 2024
How to resize canvas without resizing renderer or scaling contents? Questions resizing	18	28366	May 12, 2018
Responsive Canvas Questions	3	437	December 4, 2024
How to make camera adapt to different screen size. (responsive camera) Questions camera	8	1868	February 29, 2024
How do I make the three.js animation responsive? Questions animation	1	2879	March 22, 2018

Responsive renderer with limits

Related topics