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?
camera.aspect = window.innerWidth / window.innerHeight;
renderer.setSize( window.innerWidth , window.innerHeight );
Thank you very much. I appreciate your hard work here and love the library.
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.
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.
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.
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/ .
That's awsome thanks for your help guys!
@WestLangley awesome! :)
Totally awesome ! :)