Three.js-Vollbildproblem

Ich habe die API von Three.js durchgelesen, die Fragen hier auf StackOverflow gelesen, den Code mit Firebug und dem Debugger von Chrome debuggt, alles entfernt, was ich konnte, aber ich erhalte immer noch diesen irritierenden Vollbildfehler , wobei der Renderer-Ansichtsport größer als mein Bildschirm ist und dadurch Bildlaufleisten angezeigt werden. Es handelt sich um einen sichtbaren Fehler, der sich nicht auf das Rendern oder andere Vorgänge auswirkt. Ich versuche lediglich, die Größe des Ansichtsfensters so zu steuern, dass es der verfügbaren Bildschirmfläche entspricht, ohne dass Bildlaufleisten angezeigt werden.

Ich verwende Google Chrome 18 unter Windows 7 und fange gerade erst an, mit der Three.js-API zu arbeiten, aber ich habe in der Vergangenheit Dinge wie OpenGL verwendet, sodass Grafik-APIs nicht unbekannt sind.

Wenn ich versuche, diesen Code auszuführen (das ist das Standardbeispiel auf der Github-Hauptseite):

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

}

Es wird gut gerendert, ich sehe, wie sich das rote Drahtrahmenfeld dreht, aber mir ist aufgefallen, dass der Renderer-Ansichtsport zu groß ist, er ist größer als meine verfügbare Bildschirmgröße, was dazu führt, dass Bildlaufleisten angezeigt werden. Der Code verwendet window.innerWidth Und window.innerHeight um das Seitenverhältnis und die Breite/Höhe für den Renderer festzulegen, aber es scheint, als ob er irgendwo 20 bis 30 zusätzliche Pixel aufnimmt und sie unten und rechts auf der Seite hinzufügt?

Ich habe versucht, das CSS für das Body-Element anzupassen, um Ränder und Abstände zu entfernen, dasselbe gilt für das Canvas-Element, das erstellt wird, aber nichts. Ich habe die Bildschirmgröße an die Seite angepasst und JavaScript erstellt alert() Funktionen, um die Fensterbreite und -höhe zu überprüfen und dann zu beobachten, wie sie während Laufzeitvorgängen an die Three.js-API übergeben werden, aber der Fehler bleibt bestehen: Die Größe des Canvas-Rendering-Objekts ändert sich selbst auf eine etwas größere Größe als die Bildschirmgröße. Der Lösung des Problems komme ich am nächsten, wenn ich so etwas mache:

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

Dadurch wird die Renderergröße innerhalb der Grenzen des Fensters angepasst, jedoch nur bis zu einem bestimmten Punkt. Wenn ich absenke val auf weniger als 7, z. B. 6 oder weniger, springt die Renderer-Größe wieder heraus und ist erneut um etwa 20 Pixel größer als der Bildschirm, wodurch die Bildlaufleisten angezeigt werden?

Irgendwelche Gedanken oder Ideen?

Einfach einstellen Bildschirmsperre; on Canvas-Element in Ihrem CSS

Der <canvas> Element ist laut dem Mozilla-Entwicklernetzwerk offiziell ein Element auf Blockebene. Etwas zwischen einem Inline-Element und einem Blockelement. Sie schreiben:

Browser zeigen das Element auf Blockebene normalerweise mit einer neuen Zeile sowohl vor als auch nach dem Element an.

Die Darstellung des Elements kann jedoch von Browser zu Browser unterschiedlich sein. Um sicherzustellen, dass Sie das richtige Verhalten erhalten, ist es am besten, dies explizit festzulegen display: inline; oder display: block; in Ihrem CSS.

Um das Problem zu lösen, setzen Sie einfach den Anzeigewert in Ihrer CSS-Datei auf „Blockieren“.

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

I. Genauigkeit der Ansichtsfenstergröße

Ich empfehle die Verwendung viewportSize.js von Tyson Matanich, da „window.innerWidth“ und „window.innerHeight“ nicht immer korrekt sind.

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

Demo: http://tysonmatanich.github.com/viewportSize/

Hier ist eine ausführliche Erklärung des Autors:

„Die meisten Leute verlassen sich auf window.innerWidth, document.documentElement.clientWidth oder $(window).width(), die die in CSS-Medienabfragen verwendete Ansichtsfensterbreite nicht immer genau angeben. Beispielsweise ändern WebKit-Browser die Größe ihres CSS.“ Ansichtsfenster, wenn Bildlaufleisten sichtbar sind, während dies bei den meisten anderen Browsern nicht der Fall ist. Da window.innerWidth unabhängig vom Status der Bildlaufleiste konstant bleibt, ist es keine gute Option für die Verwendung mit Chrome oder Safari. Darüber hinaus Internet Explorer 6, 7 und 8 unterstützen window.innerWidth nicht. Andererseits ändert sich document.documentElement.clientWidth basierend auf dem Status der Bildlaufleiste und ist daher keine gute Option für Internet Explorer, Firefox oder Opera.“

Beispiel :

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

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

II. Schwer fassbare Elemente

Achten Sie auf alle Elemente, die programmgesteuert erstellt wurden (über „createElement“). Sie sind leicht zu übersehen.

Verwenden Sie den Inspektor von Chrome oder Firebug, um zu sehen, ob es noch andere Elemente gibt, die Sie möglicherweise übersehen haben. Oft sehe ich etwas, das ich völlig vergessen hatte, tief im Code der letzten Woche vergraben und frage mich, wie zum Teufel ich es vorher übersehen hatte.

III. Hard-Reset

Um gründlich zu sein, können Sie schließlich einen Hard-Reset versuchen. Der klassische Reset von Eric Meyer gilt allgemein als der gründlichste (http://meyerweb.com/eric/tools/css/reset/index.html), aber ich persönlich bevorzuge den „Condensed Meyer Reset“ (der irgendwann letztes Jahr im Internet aufgetaucht ist, Autor unbekannt):

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

Dieses Problem wurde für mich behoben. Die Leinwand bleibt immer im Vollbildmodus.

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

Ich habe es ähnlich gemacht wie @paraplu, allerdings habe ich nur hinzugefügt !important in meinem Stil. Da THREE.js Inline-Stile hinzufügt.

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

Ich benutze:

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

Außerdem habe ich ein gefunden Problemumgehung ohne CSS:

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

Dieses eine Pixel Höhe war in meinem Fall für das Auslösen beider Bildlaufleisten verantwortlich. Dies hat das Problem behoben, aber es scheint keine gute Vorgehensweise zu sein.

Und natürlich wäre eine noch schlimmere Vorgehensweise:

body {
   overflow: hidden;
}

In CSS sollte dies auch funktionieren:

canvas {
    vertical-align: top;
}

Natürlich braucht es auch die Polsterung, Randfixierung von oben