Models get's squished bassed on canvas size

Questions
1

So i want to load a model on to different canvases but doto the difference in ratio of the two canvases the model is thinner in one. Despite both canvas having a resolution of 1920x1080. How do i scale the canvas resolution so that the model appears the same size on both canvases.

canvas 1:

can2
can2476×730 1.79 KB

canvas 2:

can1
can1435×703 1.74 KB

This is the code i use for both

import {GLTFLoader} from "../three/GLTFLoader.js";

        const scene = new THREE.Scene();
        var container = document.getElementById("pack");

        const camera = new THREE.PerspectiveCamera( 
            75, 
            1920/ 1080, 
            0.1, 
            1000 
        );
        
        const renderer = new THREE.WebGLRenderer({alpha: true});
        
        renderer.setSize( 1920, 1080, false );
        renderer.setPixelRatio(container.devicePixelRatio);
        container.appendChild(renderer.domElement);

        var loader = new GLTFLoader();
        

        var obj;
        var objSrc = "../img/3dObj/cardpck.glb";

        loader.load(objSrc , function(gltf){
            obj = gltf.scene;
            scene.add(gltf.scene);
        });

        var light = new THREE.HemisphereLight(0xffffff, 0x000000, 3);
        scene.add(light);
        camera.position.set(0, 3, 6);

        var first = true;
        var left = false;
        function animate(){
            requestAnimationFrame(animate)
            
            if(first == true){
                obj.rotation.y = 3.6;
                first = false;
            }
            
            if(left == false){
                obj.rotation.y += 0.004;
            }else{
                obj.rotation.y -= 0.004;   
            }

            renderer.setSize(1920, 1080, false);
            renderer.render(scene, camera);
        }
        animate();
2

Its always nice to provide some code, makes it much more easy to help you in any way.

You probably have to adjust renderer size or recalculate camera projection matrix

renderer.setSize( width, height )
renderer.setPixelRatio(window.devicePixelRatio)
camera.aspect = width / height
camera.updateProjectionMatrix()
1 Like