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
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? This is the layout I am using, more or less: http://layout.jquery-dev.net/demos/simple.html Thanks, |
I'm sorry, but I don't understand what the problem is, can you try to simplify explanation? |
Ok, sorry.
Brent |
That's the only thing there is:
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
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? |
Here is my repository: 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. @zz85: Maybe it'd be good to add a |
Thank you! I will check this out. I have my project up on my server. Thanks! |
…() to CombinedCamera (mrdoob#69)
The following solved it for me: camera.aspect = 1; |
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 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 );
} |
This comment has been minimized.
This comment has been minimized.
Co-authored-by: liufang <liufang@oppentech.com>
Here is another one:
I wanted to handle window resizing,
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 :-)
The text was updated successfully, but these errors were encountered: