Полностью экранная проблема Three.js

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

Я использую Google Chrome 18 в Windows 7, и я только начинаю работать с API Three.js, но раньше я использовал такие вещи, как 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, чтобы удалить поле и дополнение, то же самое для создаваемого элемента canvas, но ничего. Я повторил размер экрана на странице и сделал функции 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 пикселей (приблизительное), чем на экране, вызывая появление полос прокрутки?

Любые мысли или идеи?

Ответы

Ответ 1

Просто установите display: block; на элементе canvas в вашем CSS

Элемент <canvas> в соответствии с сетью разработчиков mozilla официально элемент уровня блока. Что-то между встроенным элементом и блочным элементом. Они пишут:

Браузеры обычно отображают элемент уровня блока с новой строкой как до, так и после элемента.

Но рендеринг элемента может варьироваться в разных браузерах, поэтому, чтобы быть уверенным, что вы получите правильное поведение, лучше всего явно установить display: inline; или display: block; в свой CSS.

Итак, просто установите его отображаемое значение в вашем файле CSS для блокировки, чтобы решить проблему.

canvas {
    display: block; /* fix necessary to remove space at bottom of canvas */
}

Ответ 2

Удалите поля CSS и скройте переполнение:

body{
  margin: 0px;
  overflow: hidden;
}

Ответ 3

I. Точность измерения размера экрана

Я рекомендую использовать viewportSize.js автор Tyson Matanich, поскольку "window.innerWidth" и "window.innerHeight" не всегда точны.

Загрузить: https://github.com/tysonmatanich/viewportSize

Демо: http://tysonmatanich.github.com/viewportSize/

Вот подробное объяснение от автора:

"Большинство людей полагаются на window.innerWidth, document.documentElement.clientWidth или $(window).width(), которые не всегда точно сообщают ширину видового экрана, используемую в запросах на CSS-загрузку. Например, браузеры WebKit меняют размер их просмотр в CSS, когда полосы прокрутки видны, в то время как большинство других браузеров этого не делают. Поскольку window.innerWidth остается постоянным независимо от состояния полосы прокрутки, это не очень хороший вариант для использования с Chrome или Safari. Кроме того, Internet Explorer 6, 7, и 8 не поддерживают window.innerWidth. С другой стороны, document.documentElement.clientWidth изменяется в зависимости от состояния полосы прокрутки и, следовательно, не является хорошим вариантом для Internet Explorer, Firefox или Opera."

Пример:

var viewportWidth  = viewportSize.getWidth(),
    viewportHeight = viewportSize.getHeight(),
    viewportAspect = viewportWidth / viewportHeight;

camera = new THREE.PerspectiveCamera( 75, viewportAspect, 1, 10000 );

II. Исключительные элементы

Посмотрите на любые элементы, созданные программно (через "createElement" ). Их легко пропустить.

Используйте инспектор Chrome или Firebug, чтобы узнать, есть ли какие-либо другие элементы, которые вы, возможно, пропустили. Часто я вижу то, о чем я совсем забыл, глубоко погруженный в код прошлой недели, и задаюсь вопросом, как я раньше пропустил его.

III. Жесткий Reset

Наконец, чтобы быть тщательным, вы можете попробовать жесткий reset. Эрик Мейер классик reset обычно считается самым тщательным (http://meyerweb.com/eric/tools/css/reset/index.html), но я лично предпочитаю" Condensed Meyer Reset '(который появился в Интернете в прошлом году, автор неизвестен):

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
    padding: 0;
    margin: 0;
    }
fieldset, img { 
    border: 0;
    }
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
ol, ul {
    list-style: none;
    }
address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
    }
caption, th {
    text-align: left;
    }
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
    }
q:before, q:after {
    content: '';
    }
abbr, acronym { 
    border: 0;
    }

Ответ 4

В css это также должно сделать трюк:

canvas {
    vertical-align: top;
}

Естественно также требуется дополнение, исправления полей сверху

Ответ 5

Эта фиксированная проблема для меня. он всегда будет держать холст на полном экране.

canvas {
    width: 100vw;
    height: 100vh;
    display: block;
  }