CSS based size by default? #4903
Description
I'm just curious but have you considered making CSS based sizing the default? If you did less code would have to change for various use cases
For example many samples do stuff like this
camera = new THREE.PerspectiveCamera(
50, window.innerWidth / window.innerHeight, 1, 1000 );
And or they set
renderer.setSize( window.innerWidth, window.innerHeight );
But if instead you based the size of the canvas off its clientWidth and clientHeight then it would just always work. The user can make container and set it's CSS to any size. For example
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden; // make sure no scrollbar
}
#c {
width: 100%;
height: 100%;
}
</style>
<body>
<canvas id="c"></canvas>
</body>
And it just works. If they change the canvas to be some specific size like
#c {
width: 400px;
height: 300px;
}
Then it still just works.
If they put the canvas inside some other containers (say they are making an editor and there's a side tab) it all just works. Whereas the way three is now you always have to go muck with the code for a different use cases.
You'd have to stop mucking with style.width and style.height inside three but as it is it seems like three is fighting the web platform instead of embracing it.
Thoughts?
To be clear see these samples. They all use exactly the same JavaScript (in fact they're all pointing to the same JavaScript file). Because they use CSS and clientWidth, clientHeight nothing needs to change
Full size window with user created canvas
http://greggman.com/downloads/examples/three-by-css/three-by-css-01.html
80% size with user created canvas (size the window)
http://greggman.com/downloads/examples/three-by-css/three-by-css-02.html
Inline for article with user created canvas
http://greggman.com/downloads/examples/three-by-css/three-by-css-03.html
Full size window using container div where three.js makes the canvas
http://greggman.com/downloads/examples/three-by-css/three-by-css-by-container-01.html
80% size with using container div where three.js makes the canvas (size the window)
http://greggman.com/downloads/examples/three-by-css/three-by-css-by-container-02.html
Inline for article using container span where three.js makes the canvas
http://greggman.com/downloads/examples/three-by-css/three-by-css-by-container-03.html
No container div, uses the body, three.js creates the canvas
http://greggman.com/downloads/examples/three-by-css/three-by-css-body-only.html
This one is same as inline but uses box-sizing: box-border; which mean even though the container is set to 400px/300px the border is subtracted from the inside so the canvas needs to be 390/290 and again it just works because that's what clientWidth and clientHeight are.
http://greggman.com/downloads/examples/three-by-css/three-by-css-by-container-04.html