CODEWITHSUNDEEP
three.jsreact-three-fiber
KiwiCoder
KiwiCoder

Reputation: 1534

GLTF inside Canvas Threejs is stretched

The problem

When loading my GLTF inside the canvas element of react-three-fiber in a 100vw x 100vh div the GLTF model seems to look fine. However when I change the size of the containing div and canvas to 50vw x 100vh the GLTF model seems to be stretched.

100vw x 100vh screenshot enter image description here

100vw x 50 vh screenshot enter image description here

What I have tried so far

I have tried to set the aspect ratio of the camera.

<Controls
        enableDamping
        rotateSpeed={0.3}
        dampingFactor={0.1}
        cameraProps={{
          position: [11, 11, 11],
          near: 0.1,
          far: 1000,
          fov: 50,
          aspect: [random number here doesn't change anything]
        }}
        maxDistance={18}
      />

I have tried to add a window event listener on resize and setting the aspect ratio like so:

function onWindowResize() {
    camera.aspect = 2.0 -> doesn't have any effect, not even with random numbers
    camera.updateProjectionMatrix();
    renderer.setSize(book.clientWidth, book.clientHeight);
}

Nothing of the above seems to work and I am out of options. I found several related posts on SO en google. I tried them all..

Versions etc

"@react-three/drei": "^7.25.0",
"@react-three/fiber": "^7.0.21",
"@react-three/postprocessing": "^2.0.5",

I am using orbot controls and a perspective camera. Here is the link to the code sandbox.

https://codesandbox.io/s/36uiq?file=/src/index.js

Hopefully someone is able to help me out.

Upvotes: 1

Views: 868

Answers (1)

M -
M -

Reputation: 28482

When updating your camera's aspect ratio, make sure it matches your renderer's aspect ratio:

camera.aspect = book.clientWidth / book.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize( book.clientWidth, book.clientHeight );

Make sure that camera exists, and it's the camera you're using to perform your render.

Upvotes: 1

Related Questions