Проблема с полноэкранным режимом Three.js

Я прочитал API Three.js, прочитал вопросы здесь, в StackOverflow, я отладил код с помощью отладчика firebug и chrome, я удалил все, что мне нужно. может, но я все еще получаю эту раздражающую полноэкранную ошибку, когда порт просмотра рендерера больше моего экрана, что приводит к появлению полос прокрутки. Это видимая ошибка, которая не влияет на рендеринг или другие операции, я просто пытаюсь контролировать размер порта просмотра, чтобы он соответствовал доступной площади экрана без появления полос прокрутки.

Я использую Google Chrome 18 в Windows 7 и только начинаю работать с Three.js API, но в прошлом я использовал такие вещи, как OpenGL, так что графический API мне знаком.

Когда я пытаюсь запустить этот код (, который является примером по умолчанию, показанным на главной странице github):

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 );

}

Он отображается нормально, я вижу вращающуюся красную проволочную рамку, но я заметил, что представление средства визуализации порт слишком большой, он больше, чем мой доступный размер экрана, что приводит к появлению полос прокрутки. Код использует window.innerWidthи window.innerHeightдля установки соотношения сторон и ширины/высоты для рендерера, но кажется, что он где-то берет 20-30 лишних пикселей и добавляет их внизу и справа страницы. ?

Я попытался настроить CSS для элемента body, чтобы удалить поля и отступы, то же самое для элемента холста, который создается, но ничего. Я повторил размер экрана на странице и создал функции JavaScript alert()для проверки ширины и высоты окна, а затем наблюдаю, как они передаются API Three.js во время выполнения операций, но ошибка остается :объект рендеринга холста изменяет свой размер, чтобы немного увеличить размер экрана.Ближе всего к решению проблемы я подошел к следующему::

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());

Это работает, чтобы привести размер рендерера в границы окна, но только до определенной точки. Если я уменьшу valдо значения менее 7, например. 6 или меньше, размер рендерера снова увеличивается и снова становится больше на 20 пикселей (приблизительно ), чем экран, вызывая появление полос прокрутки?

Есть мысли или идеи?