THREE.JS - Kamera auf gesamte Szene ausrichten (dass man alles sieht)

[Orlok]

Hallo

Habe aktuell ein Problem bei Three.js

Was hast du konkret versucht und was hat nicht funktioniert?

ich lasse auf einer szene (400x400) ein paar Elemente zeichnen und möchte, dass alle elemente im Kamerabereich bleiben.

Wie kriege ich das hin?

Du musst dafür sorgen, dass die verschiedenen Objekte die gezeichnet werden sollen innerhalb des Viewing Frustums liegen, dessen Abmessungen du bei der Erzeugung der Kamera festlegst. Wenn wir also mal davon ausgehen, dass du dich für eine perspektivische Projektion entschieden hast, dann erzeugst du deine Kamera durch den Aufruf der Klasse PerspectiveCamera in etwa so:

const aspect = canvas.clientWidth / canvas.clientHeight;

const camera = new THREE.PerspectiveCamera(45, aspect, 1, 100);

Der erste Parameter der Klasse bestimmt das vertikale Sichtfeld (field of view) und ist als Winkel in Grad anzugeben. Der zweite Parameter bestimmt das Verhältnis der Seiten zueinander (aspect ratio) und der dritte und vierte Parameter die nahe (near) und ferne (far) Begrenzung des Viewing Frustums.

Wenn du damit den sichtbaren Bereich definiert hast, dann kannst du die Kamera zudem frei innerhalb des Koordinatensystems positionieren, indem du den Eigenschaften x, y oder z des position-Objektes der Kamerainstanz entsprechende Werte zuweist. Also beispielsweise so:

camera.position.y = 10;

camera.position.z = 50;

Auf gleiche Weise, also ebenfalls über die Eigenschaft position, kannst du die von die von dir erzeugten Objekte im dreidimensionalen Raum verschieben. In etwa nach diesem Schema:

const object = new THREE.Mesh(geometry, material);

object.position.x = 10;

object.position.y = 10;

scene.add(object);

Ob die von dir erzeugten Objekte alle zu sehen sind hängt mithin davon ab mit welchen Werten du die Geometrie erzeugt hast, wo die Objekte positioniert hast, welche Abmessungen du für den Viewing Frustum bestimmt hast, und schließlich, welche Koordinaten du für deine Kamera angegeben hast.

Mehr kann ich dir dazu leider nicht sagen, da ich von Three.js keine Ahnung habe. ;-)

Gruß,

Orlok