After successfully loading a 3d model with a gltf extension using the GLTFLoader in Three.js, I encountered a new challenge. I needed to adjust the dimensions of the model dynamically when the window is resized, based on the values of window.innerWidth and window.innerHeight.
const loader = new GLTFLoader();
// Loading the background box
loader.load('../../assets/backgroundBox.gltf', function(gltf) {
scene.add(gltf.scene);
gltf.animations;
gltf.scene.rotation.z = Math.PI/2;
gltf.scene.rotation.y = Math.PI/2;
gltf.scene.castShadow = true;
gltf.scenes;
gltf.cameras;
gltf.asset;
}, function(err) {
console.log('An error occurred while loading files');
});
To address this issue, I attempted to add an event listener to the window object. However, I struggled to implement a solution that would change the dimensions of the loaded model in response to window resizing.
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
});