Problem with my gltf model when resizing the viewport

Hi
I have a problem when resizing the viewport and my imported 3D model doesn’t “save” the original proportion. I tried a lot of things but the same results.

This is the website where u can see the problem: https://suarezdesignstest.netlify.app/

I have to say that I involved with this project without knowing javascript (Only the very basic), so maybe there are an error or mistake in my code. Even though I didn’t know much about javascript I managed to get that result. Thanks in advance for the help. Appreciate it

This is my code:

// Scene
const scene = new THREE.Scene()

// Camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight)
camera.position.z = 5
scene.add(camera)

//Lights
const light = new THREE.SpotLight( "white", 5)
light.position.set(0,0,5)
scene.add(light)

const uplight = new THREE.SpotLight( "white", 5)
uplight.position.set(0,10,5)
scene.add(uplight)

const dolight = new THREE.SpotLight( "white", 5)
dolight.position.set(0,-10,5)
scene.add(dolight)

const backlight = new THREE.PointLight( "white", 100)
dolight.position.set(0,0,-50)
scene.add(backlight)

    //Blue
const aLight = new THREE.PointLight( 0x1386fb, 10)
aLight.position.set(5,5,3)
scene.add(aLight)

const bLight = new THREE.PointLight( 0x1386fb, 10 )
bLight.position.set(-5,-5,3)
scene.add(bLight)
    //Pink
const arLight = new THREE.PointLight( 0xbd86fb, 10 )
arLight.position.set(-1,5,3)
scene.add(arLight)

const brLight = new THREE.PointLight( 0xbd86fb, 10 )
brLight.position.set(1,-5,3)
scene.add(brLight)

//Cursor_follow
const cursor = { x: 0, y:0 }

window.addEventListener("mousemove", (event) =>{

    cursor.x = event.clientX / window.innerWidth - 0.5
    cursor.y = event.clientY / window.innerHeight - 0.5

})

//3D_Logo_Model
const loader = new THREE.GLTFLoader();

loader.load( '/images/3D_logo.glb', function ( gltf ) {


    gltf.scene.scale.x = 1
    gltf.scene.scale.y = 1
    gltf.scene.scale.z= 1.5


    gltf.scene.position.z = 0

    const y = () => {
        window.requestAnimationFrame(y)

        const rotatex = cursor.x
        const rotatey = cursor.y

        gltf.scene.rotation.x = rotatey / 4
        gltf.scene.rotation.y = rotatex / 4
    
    }

    y()
    
	scene.add(gltf.scene)
})

//Resize_canvas
window.addEventListener("resize", () => {

    renderer.setSize(window.innerWidth , window.innerHeight )
    camera.aspect = window.innerWidth / window.innerHeight

    camera.updateProjectMatrix
})

//Renderer
const renderer = new THREE.WebGLRenderer({alpha: true, antialias: true})
renderer.setSize( window.innerWidth, window.innerHeight)
renderer.setPixelRatio(window.devicePixelRatio * 2)
document.body.append(renderer.domElement)


const constrender = () =>{

    window.requestAnimationFrame(constrender)

    renderer.render(scene, camera)

}

constrender()

It should be camera.updateProjectMatrix();.

BTW: It’s not recommended to upscale the canvas that way. Use renderer.setPixelRatio(window.devicePixelRatio);.

I tried that and the same results :frowning:

Okay, I’ll change it