I've read through the Three.js API, read through the questions here on StackOverflow, I've debugged the code using firebug and chrome's debugger, I've stripped out everything I can, but I am still getting this irritating full screen error, where the renderer view port is larger than my screen thus causing scroll bars to appear. It's a visible error that does not affect rendering, or other operations, I am just trying to control the size of the view port so that it matches available screen real estate without scroll bars appearing.
I am using Google Chrome 18 on Windows 7 and I am just starting to work with the Three.js API, but I have used things like OpenGL in the past so graphics API are not unfamiliar.
When I try and run this code (which is the default example shown on the github main page):
var camera, scene, renderer,
geometry, material, mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene.add( camera );
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
It renders fine, I see the red wire frame box rotating around, but I've noticed that the renderer view port is too big, it is larger than my available screen size, which causes scroll bars to appear. The code uses window.innerWidth and window.innerHeight to set the aspect ratio and the width/height for the renderer, but it seems as if it picks up 20 to 30 extra pixels somewhere and adds them to the bottom and the right of the page?
I've tried adjusting the CSS for the body element to remove margin and padding, same for the canvas element that gets created, but nothing. I've echoed the screen size to the page, and made JavaScript alert() functions to check the window width and height, and then watch as they get passed to the Three.js API during runtime operations, but the error remains: the canvas rendering object is resizing itself to slightly larger than the screen size. The closest I get to correcting the problem is doing something like this:
var val = 7;
//Trims the window size by val
function get_width(){return window.innerWidth - val;}
function get_height(){return window.innerHeight - val;}
//... Code omitted for brevity
camera = new THREE.PerspectiveCamera( 75, get_width() / get_height(), 1, 10000 );
//... Code omitted for brevity
render.setSize(get_width(), get_height());
It works to bring the renderer size within the boundaries of the window, but only to a point. If I lower val to less than 7, e.g. 6 or less, the renderer size pops back out and is again larger by 20 px (approx), than the screen, causing the scroll bars to appear?
Any thoughts or ideas?