CODEWITHSUNDEEP
javascripthtmlcssthree.js
8protons
8protons

Reputation: 3959

THREE.JS - How to preserve integrity of the scene when the window is resized?

I have a scene inside a div and it fit's great; but when I move the window, the scene goes out of scope of the div and almost takes up the entire window. It definitely goes a little crazy.

What are some ways to keep the scene inside the div even when the window is moved or resized?

Upvotes: 0

Views: 54

Answers (1)

Wilt
Wilt

Reputation: 44356

It is a common solution to make a on window resize listener and attach your custom logic to keep things in line.

To add a listener:

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

You can add any code in your onWindowResize callback method, but here an example:

function onWindowResize() {

    var width = window.innerWidth,
        height = window.innerHeight;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize( width, height );   
}

Upvotes: 1

Related Questions