Skip to content

Canvas scaling problem #1406

Closed
Sillycon opened this Issue Feb 27, 2012 · 7 comments

6 participants

@Sillycon

Hi.

I've been trying to resize the canvas renderer without scaling the content but can't seem to find a solution. I've been searching high and low and am now asking here for help since I feel like I'm not making any progress on the issue. All demos scale as far as I noticed except for OrthographicCamera but I need perspective.

Just to clarify, I would like to create my scene and objects and have that scene center to the browser when resized but not scale. I tried to compensate by scaling and repositioning camera according to browser scale but it's far from perfect.

This code resizes the renderer and sets up the camera, but it causes the whole scene to scale.Are there any solutions, workarounds for this?

function onWindowResize(){

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

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

Thank you very much. I appreciate your hard work here and love the library.

@chandlerprall

You want the canvas to always fill the window, but have objects in your scene stay the same size no matter how large the canvas is, correct?

You will have to move the camera towards & away from it's target as the canvas contracts and expands.

@Sillycon

Correct. Thank you but I tried that already and was not satisfied with the result. Was hoping there was some built in solution that would not cause slight variations and therefore bad aliasing and blurring of bitmaps.

@alteredq

It should be possible to achieve this by creating camera frustum which would get wider / narrower depending on window size, either by playing with aspect and fov in PerspectiveCamera or by creating custom Camera with own projection matrix using THREE.Matrix4.makeFrustum.

@WestLangley
Collaborator

We want all objects, regardless of their distance from the camera, to appear the same size, even as the window is resized.

The key equation to solving this is this formula for the visible height at a given distance:

visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;

If we increase the window height by a certain percentage, then what we want is the visible height at all distances
to increase by the same percentage.

This can not be done by changing the camera position. Instead you have to change the camera field-of-view.

Here is a fiddle that appears to work: http://jsfiddle.net/Q4Jpu/ .

@Sillycon
Sillycon commented Mar 1, 2012

That's awsome thanks for your help guys!

@Sillycon Sillycon closed this Mar 1, 2012
@mrdoob
Owner
mrdoob commented Mar 1, 2012

@WestLangley awesome! :)

@Makio64
Makio64 commented Jun 17, 2012

Totally awesome ! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.