CODEWITHSUNDEEP
javascripthtmlcssthree.js
mrgloom
mrgloom

Reputation: 21682

threejs: how to set renderer size to fit screen?

Using code below I have some problems:

        //WebGL renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size   
        document.body.appendChild(renderer.domElement);

Top left corner - some thin white border:

enter image description here

Bottom right corner - scroll elements (looks like window.innerWidth, window.innerHeight is bigger then initial view):

enter image description here

How to get w,h for renderer.setSize to fit all visible area inside window? Or maybe this problems should be fixed in other way?

Upvotes: 0

Views: 741

Answers (1)

2pha
2pha

Reputation: 10165

the white space at the top and left is because I think the body has a margin by default.
The scrollbars are because for reasons unknown to me, the canvas element behaves as if it is an inline element.

This css should fix it: 

body {
  margin: 0px;
  overflow: hidden;
}
canvas {
  display: block;
}

Upvotes: 5

Related Questions