Wie kann man in ThreeJS einen scrollenden Renderer haben?

Question

Ich benutze die OrtographicCamera.

A canvas wird in HTML erklärt und ich übergeben es an die renderer wie unten dargestellt:

var canvas = document.getElementById("canvas") 

var width = canvas.clientWidth; 
var height = canvas.clientHeight; 

renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    canvas: canvas 
}); 

renderer.setClearColor(0xf0f0f0); 
renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(width, height); 

Das Problem ist, dass die Würfel ich zu der Szene hinzugefügt sind geschnitten.

Die Szene wächst und hat eine Höhe, die größer ist als die verfügbare Ansichtsfensterhöhe.

Ich hätte gerne Bildlaufleisten, damit ich nach unten auf die Leinwand gehen und alle Würfel sehen kann, ohne zoomen zu müssen.

Siehe Screenshot:

HTML

<div id="container"> 
    <canvas id="canvas"></canvas> 
</div> 

CSS

#canvas 
{ 
    width: 100%; 
    height: 100%; 
} 

Jede Beratung ist wirklich zu schätzen d.

Answer 1

I orbitcontrols verwendet und verwaltet zu bekommen, was ich wollte, das heißt, in der Lage, die versteckten Objekte in der Szene zu sehen. Der Benutzer muss nur Pfeil nach unten und Pfeil nach oben drücken, um die Kamera nach unten zu bewegen.

Keine Notwendigkeit, mit dem Canvas-Element überhaupt zu geigen. Das ist gut, weil das Steuern der Canvas-Größe in CSS etwas schwierig und viel mehr ist, wenn Scrollen involviert ist und es mit dem ThreeJS-Renderer verbunden ist.

https://github.com/mattdesl/three-orbit-controls

Answer 2

Sie haben zwei Dinge vor sich. Die erste besteht darin, dass die Zeichenfläche größer als das Clientfenster sein muss, damit Bildlaufleisten angezeigt werden. Die genaue Größe hängt von Ihren Bedürfnissen ab, aber versuchen Sie es mit dem, was Sie jetzt haben.

Das zweite Problem wird sein, dass die Kamera selbst links, rechts, oben und unten (sowie nah und fern) Ebenen hat, die den Bereich innerhalb der Kameraansicht definieren. Erhöhen Sie diese Werte, wenn Sie die Kamera so einrichten, dass mehr Szenen in der Leinwand sichtbar sind. Wenn Ihre Breite in Ordnung ist, können Sie möglicherweise nur die Ober-/Unterseite erhöhen.

https://threejs.org/docs/api/cameras/OrthographicCamera.html