Responsive Design with GLTFLoader

Hello,

I want to prevent my model from distortion when the window resizes, but it doesn’t seem to work:

let scene, camera, renderer, book;

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.y = 15;
    camera.position.z = 20;
    camera.lookAt(0, 0, 0);
    
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    hlight = new THREE.AmbientLight(0x404040, 1);
    scene.add(hlight);

    directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(0, 1, 0);
    directionalLight.castShadow = true;
    scene.add(directionalLight);
    
    light1 = new THREE.PointLight(0xc4c4c4, 1);
    light1.position.set(0, 300, 500);
    scene.add(light1);

    light2 = new THREE.PointLight(0xc4c4c4, 1);
    light2.position.set(500, 100, 0);
    scene.add(light2);

    light3 = new THREE.PointLight(0xc4c4c4, 1);
    light3.position.set(0, 100, -500);
    scene.add(light3);

    light4 = new THREE.PointLight(0xc4c4c4, 1);
    light4.position.set(-500, 300, 0);
    scene.add(light4);

    let loader = new THREE.GLTFLoader();
    loader.load('scene.gltf', function(gltf){
        book = gltf.scene.children[0];
        book.scale.multiplyScalar(0.25);
        scene.add(gltf.scene);
        renderer.render(scene, camera);
    });
}

function render() {
    renderer.render(scene, camera);
};

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

init();

window.addEventListener('resize', onWindowResize, false);

There were previous posts about similar problems that suggested replacing the resize function with:

function onWindowResize() {
    camera.aspect = book.clientWidth / book.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(book.clientWidth, book.clientHeight);
}

But this actually makes nothing responsive at all—I was wondering if this has to do with my use of GLTFLoader?

I am new to three.js and would love it if someone can kindly point me in the right direction :smiley:.

The problem here is that render() is only called once — you’ll want to re-render when the window size changes, at least. Otherwise it’s just a static canvas after the first render. :slight_smile:

1 Like

That fixed the problem! Thank you so much for your insight. :grinning_face_with_smiling_eyes: