Problema de pantalla completa de Three.js

He leído la API de Three.js, he leído las preguntas aquí en StackOverflow, he depurado el código usando Firebug y el depurador de Chrome, he eliminado todo lo que puedo, pero todavía recibo este irritante error de pantalla completa , donde el puerto de vista del renderizador es más grande que mi pantalla, lo que hace que aparezcan barras de desplazamiento. Es un error visible que no afecta el renderizado u otras operaciones, solo estoy tratando de controlar el tamaño del puerto de vista para que coincida con el estado real de la pantalla disponible sin que aparezcan las barras de desplazamiento.

Estoy usando Google Chrome 18 en Windows 7 y recién estoy comenzando a trabajar con la API de Three.js, pero he usado cosas como OpenGL en el pasado, por lo que la API de gráficos no me es desconocida.

Cuando intento ejecutar este código (que es el ejemplo predeterminado que se muestra en la página principal de 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 );

}

Se renderiza bien, veo el cuadro de alambre rojo girando, pero he notado que el puerto de visualización del renderizador es demasiado grande, es más grande que el tamaño de pantalla disponible, lo que hace que aparezcan barras de desplazamiento. El código usa window.innerWidth y window.innerHeight para establecer la relación de aspecto y el ancho/alto para el renderizador, pero parece que toma de 20 a 30 píxeles adicionales en algún lugar y los agrega a la parte inferior y derecha de la página.

Intenté ajustar el CSS para el elemento del cuerpo para eliminar el margen y el relleno, lo mismo para el elemento del lienzo que se crea, pero nada. Reproduje el tamaño de la pantalla en la página e hice JavaScript alert() funciones para verificar el ancho y el alto de la ventana, y luego ver cómo se pasan a la API de Three.js durante las operaciones de tiempo de ejecución, pero el error persiste: el objeto de representación del lienzo está cambiando de tamaño a un poco más grande que el tamaño de la pantalla. Lo más cerca que estoy de corregir el problema es hacer algo como esto:

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

Funciona para llevar el tamaño del renderizador dentro de los límites de la ventana, pero solo hasta cierto punto. si bajo val a menos de 7, por ejemplo, 6 o menos, el tamaño del renderizador vuelve a aparecer y es nuevamente más grande en 20 px (aprox.) que la pantalla, lo que hace que aparezcan las barras de desplazamiento.

¿Algún pensamiento o idea?

Simplemente configura bloqueo de pantalla; en el elemento canvas en tu CSS

El <canvas> elemento es de acuerdo con la red de desarrolladores de mozilla oficialmente un elemento a nivel de bloque. Algo entre un elemento en línea y un elemento de bloque. Escriben:

Los navegadores normalmente muestran el elemento de nivel de bloque con una nueva línea antes y después del elemento.

Pero la representación del elemento puede variar según los navegadores, por lo que para asegurarse de obtener el comportamiento correcto, es mejor establecer explícitamente display: inline; o display: block; en tu CSS.

Así que simplemente configure su valor de visualización en su archivo CSS para bloquear, para resolver el problema.

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

I. Precisión del tamaño de la ventana gráfica

recomiendo usar viewportSize.js por Tyson Matanich, ya que ‘window.innerWidth’ y ‘window.innerHeight’ no siempre son precisos.

Descargar : https://github.com/tysonmatanich/viewportSize

demostración: http://tysonmatanich.github.com/viewportSize/

Aquí hay una explicación detallada del autor:

“La mayoría de las personas confían en window.innerWidth, document.documentElement.clientWidth o $(window).width() que no siempre informan con precisión el ancho de la ventana gráfica utilizada en las consultas de medios CSS. Por ejemplo, los navegadores WebKit cambian el tamaño de su CSS viewport cuando las barras de desplazamiento están visibles, mientras que la mayoría de los otros navegadores no lo hacen. Dado que window.innerWidth permanece constante independientemente del estado de la barra de desplazamiento, no es una buena opción para usar con Chrome o Safari. Además, Internet Explorer 6, 7 y 8 no son compatibles con window.innerWidth. Por otro lado, document.documentElement.clientWidth cambia según el estado de la barra de desplazamiento y, por lo tanto, no es una buena opción para Internet Explorer, Firefox u Opera”.

Ejemplo :

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

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

II. Elementos esquivos

Busque cualquier elemento creado mediante programación (a través de ‘createElement’). Son fáciles de perder.

Use el inspector de Chrome o Firebug para ver si hay otros elementos que podría haber pasado por alto. A menudo veo algo que había olvidado por completo, enterrado profundamente en el código de la semana pasada y me pregunto cómo diablos me lo había perdido antes.

tercero Restablecimiento completo

Por último, para ser exhaustivo, puede intentar un restablecimiento completo. El reinicio clásico de Eric Meyer generalmente se considera el más completo (http://meyerweb.com/eric/tools/css/reset/index.html), pero personalmente prefiero el ‘Restablecimiento condensado de Meyer’ (que apareció en la web en algún momento del año pasado, autor desconocido):

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

Este problema fijo para mí. siempre va a mantener el lienzo en pantalla completa.

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

Lo hice de manera similar a @paraplu, sin embargo, acabo de agregar !important en mi estilo Dado que TRES.js agrega estilos en línea.

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

Estoy usando:

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

También he encontrado un solución alterna sin CSS:

renderer.setSize(window.innerWidth, window.innerHeight - 1);

Ese píxel de altura fue responsable de activar ambas barras de desplazamiento en mi caso, esto lo solucionó, pero no parece ser una buena práctica.

Y, por supuesto, una práctica aún peor sería:

body {
   overflow: hidden;
}

En css esto también debería funcionar:

canvas {
    vertical-align: top;
}

Naturalmente, también necesita el relleno, correcciones de margen desde arriba