javascript - Changing proportionally the size of a geometry when the window size changes using onWindowResize() function -

i making first steps coding javascript. made courses , exploring webgl world using three.js

i experimenting function used in examples of threes.org:

        function onwindowresize() {            camera.aspect = window.innerwidth / window.innerheight;           camera.updateprojectionmatrix();            renderer.setsize(window.innerwidth, window.innerheight);          } 

with function can center geometry when reduce or increase width of browser's window , can make geometry smaller or bigger when reduce or increase height of browser's window.

but thing when reduce height of window can see geometry because it's centered , smaller. when reduce width of window can't see geometry because it's centered not smaller.

in example: http://codepen.io/gnazoa/pen/bjobzz tried avoid problem using object.scale.devidescalar(1.5); in onwindowresize() function, doesn't makes change.

i searching solution because consider important correct experience, because moment, see geometry in desktop screen:

and incomplete geometry in iphone:

do have suggestion? problem possible solve?

welcome world of js/three.js! , putting fiddle. here's my suggested solution.

1) have unfortunate typo on line 44

object.scale.devidescalar(1.5); 

should be

object.scale.dividescalar(1.5); 

when working javascript in browser, open dev tools (chrome, firefox, or browser of choice). throw like:

uncaught typeerror: object.scale.devidescalar not function 

2) fixing that, still have problem. line you've written mutates (changes) three.js cube reducing scale 66% every call onwindowresize(). you'll imagine, 0.66^many becomes 0 , cube vanishes. bummer.

i think want scale of object match scale of screen. cube takes 50% (or whatever) of div, no matter starting or resized screen.

first, brief explanation why scene seems resize on vertical , not horizontal. three.js perspective camera fov (field of view, ie angle of viewing camera collects render) depends on vertical space. update camera's available space, camera adjusts keep scene in same fov. can see in 'tall' phone; apparent height of cube same in vertical space, sides cut off.

this leads problem. messing object's scale can done commented out:

object.scale.set(factor, factor, factor); 

this can kind of things in line, becomes unwieldy when have more 1 cube or start transforming objects (scales on place). renderer can't stretched in way suggest without distorting 3d projection. think way: if have cube, can cube fill screen being distorted? rectangular screen either have: empty space, cut off cube, or distort scale.

i'm assuming end goal isn't rectangle (which emulate number of 2d javascript or css solutions less cpu , headache time).

so, my radical solution don't have canvas resize fill container. modified example puts content in containing div partially fill window. change css liking. 1 way fill window be:

width: 100%; height: 100vh; 

in case, resize preview window , code adjust canvas. set ratio @ 16:9 (common tv), can change too. container purple, render canvas light blue, , cube blue. real new code is:

var targetaspectratio = 16 / 9; //cinematic! function aspectsize(availablewidth, availableheight) {   var currentratio = availablewidth / availableheight;   if (currentratio > targetaspectratio) {     //then height limiting factor     return {       width: availableheight * targetaspectratio,       height: availableheight     };   } else {     // width limiting factor     return {       width: availablewidth,       height: availablewidth / targetaspectratio     };   } } 

essentially, rectangle of size on 0 either not wide enough or not tall enough. take space in limited dimension use keep aspect ratio in other.

there hacked lines (68:69) center renderer in container. if container window, renderer centered in that.

i hope helps , luck work.