# Problem with my gltf model when resizing the viewport

**URL:** <https://discourse.threejs.org/t/problem-with-my-gltf-model-when-resizing-the-viewport/45973>\
**Category:** Questions\
**Tags:** gltf-loader, resizing\
**Created:** [December 19, 2022, 9:02pm UTC](https://discourse.threejs.org/t/problem-with-my-gltf-model-when-resizing-the-viewport/45973 "2022-12-19T21:02:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Suuaareez](https://avatars.discourse-cdn.com/v4/letter/s/cc9497/32.png) [@Suuaareez](https://discourse.threejs.org/u/Suuaareez)\
**Post date:** [December 19, 2022, 9:02pm UTC](https://discourse.threejs.org/t/problem-with-my-gltf-model-when-resizing-the-viewport/45973/1 "2022-12-19T21:02:30Z")

</div>

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/](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:**

```javascript
// 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()

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 20, 2022, 12:29pm UTC](https://discourse.threejs.org/t/problem-with-my-gltf-model-when-resizing-the-viewport/45973/2 "2022-12-20T12:29:07Z")

</div>

> [@Suuaareez](#):
>
> `camera.updateProjectMatrix`

It should be `camera.updateProjectMatrix();`.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 20, 2022, 12:29pm UTC](https://discourse.threejs.org/t/problem-with-my-gltf-model-when-resizing-the-viewport/45973/3 "2022-12-20T12:29:55Z")

</div>

> [@Suuaareez](#):
>
> `renderer.setPixelRatio(window.devicePixelRatio * 2)`

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

---

<div class="post-metadata">

**Author:** ![Suuaareez](https://avatars.discourse-cdn.com/v4/letter/s/cc9497/32.png) [@Suuaareez](https://discourse.threejs.org/u/Suuaareez)\
**Post date:** [December 20, 2022, 2:18pm UTC](https://discourse.threejs.org/t/problem-with-my-gltf-model-when-resizing-the-viewport/45973/4 "2022-12-20T14:18:05Z")

</div>

> [@Mugen87](#):
>
> `camera.updateProjectMatrix();`.

I tried that and the same results ☹

---

<div class="post-metadata">

**Author:** ![Suuaareez](https://avatars.discourse-cdn.com/v4/letter/s/cc9497/32.png) [@Suuaareez](https://discourse.threejs.org/u/Suuaareez)\
**Post date:** [December 20, 2022, 2:19pm UTC](https://discourse.threejs.org/t/problem-with-my-gltf-model-when-resizing-the-viewport/45973/5 "2022-12-20T14:19:02Z")

</div>

> [@Mugen87](#):
>
> BTW: It’s not recommended to upscale the canvas that way. Use `renderer.setPixelRatio(window.devicePixelRatio);`.

Okay, I’ll change it