Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Window on resize, and aspect ratio #69

Closed
Omiod opened this issue Dec 27, 2010 · 13 comments
Closed

Window on resize, and aspect ratio #69

Omiod opened this issue Dec 27, 2010 · 13 comments
Labels

Comments

@Omiod
Copy link

@Omiod Omiod commented Dec 27, 2010

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
Copy link
Owner

@mrdoob mrdoob commented Dec 27, 2010

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
Copy link

@bmd0031 bmd0031 commented Apr 3, 2012

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
Copy link
Owner

@mrdoob mrdoob commented Apr 3, 2012

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

@bmd0031
Copy link

@bmd0031 bmd0031 commented Apr 3, 2012

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
Copy link
Owner

@mrdoob mrdoob commented Apr 3, 2012

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
Copy link

@bmd0031 bmd0031 commented Apr 3, 2012

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
Copy link
Owner

@mrdoob mrdoob commented Apr 3, 2012

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

@bmd0031
Copy link

@bmd0031 bmd0031 commented Apr 4, 2012

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
Copy link
Owner

@mrdoob mrdoob commented Apr 4, 2012

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?

zz85 pushed a commit to zz85/three.js that referenced this issue Apr 4, 2012
@bmd0031
Copy link

@bmd0031 bmd0031 commented Apr 4, 2012

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
Copy link

@diegocasmo diegocasmo commented Nov 12, 2014

The following solved it for me:

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

@feus4177
Copy link

@feus4177 feus4177 commented Apr 13, 2015

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

This comment was marked as off-topic.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants