Three.js: Window on resize, and aspect ratio

[Omiod]

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 :-)

[mrdoob]

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 );

}

[bmd0031]

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

[mrdoob]

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

[bmd0031]

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

[mrdoob]

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.

[bmd0031]

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.

[mrdoob]

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

[bmd0031]

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.

[mrdoob]

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?

[bmd0031]

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!

[diegocasmo]

The following solved it for me:

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

[feus4177]

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 );

}

[omnicron96]

i want to resize glft in react three fiber