Glb exported from blender gets stretched/compressed

Questions
, ,
2

You need some container resize handling logic.
and when the width/height of the container changes… the camera projection also needs to be updated to the new aspect ratio.

with a fullscreen app, its relatively straightforward to
renderer.setSize(window.clientWidth,window.clientHeight)

but for you app… you’ll need to get the bounds of the parent container, and renderer.setSize ( with those…
and you want to debounce it to avoid spamming the call.

Smth like this:


let {width, height} = canvas;

let clock=new THREE.Clock();
renderer.setAnimationLoop( (time) => {
    let dt = clock.getDelta();
    const container = renderer.domElement.parentElement;
    const w = container.clientWidth;
    const h = container.clientHeight

    if ((w !== width) || (h !== height)) {
        renderer.setSize(width = w, height = h, true);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    }
//... regular rendering here...
})
2 Likes