Three.js: Window on resize, and aspect ratio

Created on 27 Dec 2010  ·  13Comments  ·  Source: mrdoob/three.js

Here is another one:
I wanted to handle window resizing,

window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
    renderer.setSize( window.innerWidth, window.innerHeight );
}

This "mostly" works, except that the particles color is reset to black, and the aspect ratio is not updated, transforming balls in eggs ... and I have no idea how to fix this.

Thanks :-)

Question

Most helpful comment

You also need to update the camera:

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

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

All 13 comments

You also need to update the camera:

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

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

I have a "div" that has dynamic dimensions that resize when the window is resized OR when other elements within the page are hidden. When this "div" container is resized, I need the canvas to completely fill the div. I am using $('#center-pane').width() and .height() to initialize the network, which correctly fills the "center" div with desired dimensions, but I can't resize.

I can theoretically use the same function to handle both resize scenarios. I seem to be having problems with the camera.updateProjectionMatrix() when the function is being called. I have an alert() within the function and it fires on resize, so I can only figure its the camera and renderer.

I also need all objects within the canvas to be clickable, which I have a function for, but it needs to be updated, correct?
I am using the CombinedCamera. (I can't find any documentation on it, only an example);

This is the layout I am using, more or less: http://layout.jquery-dev.net/demos/simple.html
I need a resize function to fill the 'ui-center-pane' dynamically without a resize button

Thanks,
Brent

I'm sorry, but I don't understand what the problem is, can you try to simplify explanation?

Ok, sorry.

  1. Can you explain or link me to CombinedCamera documentation
  2. upon resize, it errors saying there is "no method updateProjectionMatrix()"
  3. How, and what all, should I update upon resize. (Also, how does it effect intersecting rays for handeling events)

Brent

1 Can you explain or link me to CombinedCamera documentation

That's the only thing there is:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 upon resize, it errors saying there is "no method updateProjectionMatrix()"

When I go to http://layout.jquery-dev.net/demos/simple.html and resize the page I don't see such error. I only see Uncaught TypeError: Object #<Object> has no method 'getCookie'

3 How, and what all, should I update upon resize. (Also, how does it effect intersecting rays for handeling events)

You should update the camera aspect ratio (width / height). And set a new size to the renderer. As per how resizing affects ray, please read #988.

camera.aspect = width/height; works fine, but camera.updateProjectionMatrix() is throwing the error. It shouldn't have anything to do with my layout, just the onWindowResize() function.

The UI-Layout link was to their example.

Can you share your code or a live link? camera definitely has a updateProjectionMatrix() method.

Here is my repository:
https://github.com/BioInfoBrent/BIOINFORMATICS
File:
BIOINFORMATICS/js/networkMain.js

The project is in pieces right now, in the middle of a mid-semester rewrite. The original project was controlled by one large "SWITCH" statement, I am in the process of doing away with that.

I will have the architecture complete at the end of the week, that will free up a lot of time to work on the actual THREE.js side of the project. I will have a few more questions and be able to direct and explain my questions clearer in a day or two.

Ah, I see. CombinedCamera camera doesn't have updateProjectionMatrix().

@zz85: Maybe it'd be good to add a updateProjectionMatrix() method to CombinedCamera that calls updateProjectionMatrix() on both cameraO and cameraP?

Thank you! I will check this out. I have my project up on my server.
Address: http://cas-biodb.cas.unt.edu/bionet/dev.html
-The "Network" button at the top is currently the only working part.

Thanks!

The following solved it for me:

camera.aspect = 1;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);

I'm using version 66 and calling

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

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

didn't work for CombinedCamera. Instead I had to do something like

function onWindowResize(){

    if(camera.inPerspectiveMode){
        camera.cameraP.aspect = window.innerWidth / window.innerHeight;
        camera.cameraP.updateProjectionMatrix();
    }
    else{
        camera.cameraO.left = window.innerWidth / - 2;
        camera.cameraO.right = window.innerWidth / 2;
        camera.cameraO.top = window.innerHeight / 2;
        camera.cameraO.bottom = window.innerHeight / - 2;
        camera.cameraO.updateProjectionMatrix();
    }

    renderer.setSize( window.innerWidth, window.innerHeight );

}

i want to resize glft in react three fiber

Was this page helpful?
0 / 5 - 0 ratings

Related issues

clawconduce picture clawconduce  ·  3Comments

ghost picture ghost  ·  3Comments

yqrashawn picture yqrashawn  ·  3Comments

boyravikumar picture boyravikumar  ·  3Comments

konijn picture konijn  ·  3Comments