Canvas scaling problem

[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]

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]

That's awsome thanks for your help guys!

[mrdoob]

@WestLangley awesome! :)

[Makio64]

Totally awesome ! :)

[bakajin]

Totally absolutely awesome. Just what I was looking for.

Now I have to ask, how would I go about making the camera "frame" a loaded object. So simply put with this code my scene lines up nicely to the scene top (regardless with whatever window size). But I would like to add a function that would also move the camera backwards and forwards and up and down. All to keep the object fill the entire canvas width (framed) whilst also filling the top and the bottom.

I guess it could also be done by setting a zoomlevel, though that could make the perspective weird.

It seems I can only manage one or the other.

I hope that still makes sense, and thanks for any insights

[WestLangley]

@bakajin This site is no longer a help site. stackoverflow may be helpful to you.

[bakajin]

Haha thanks WestLangley, thanks for the tip. I am most apologetic about asking. I just was so impressed by your previous answer I had to try. Have been fiddling with this for a bit, stackoverflow cq jsfiddle land was rather unhelpfull.

Well I will probably figure it out, rather close it seems