Are there any way to set renderer.setSize calculation by percent of screen?

For example i want my frame set 80% of device width and 80% of device height, can we do that?

Are there any way to set renderer.setSize calculation by percent of screen?

For example i want my frame set 80% of device width and 80% of device height, can we do that?

• javascript
• html
• mobile
• three.js
• screen

2 Answers 2

If you want to update your canvas width and height during a resize of the window (like in css), you can use this code:

function resize() {
    var factor = 0.8; // percentage of the screen
    var w = window.innerWidth * factor;
    var h = window.innerHeight * factor;
    renderer.setSize(w, h);
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
}; 

window.addEventListener("resize", resize);

First you have to get the device height using : window.innerWidth and window.innerHeight.

Then you apply your desired scaling factor when you set the size of the renderer like so :

   renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.8);

Hope this help