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

[MetaGriever]

Habe aktuell ein Problem bei Three.js

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

Wie kriege ich das hin?

Bin ein Anfänger in THREE.js

Hoffe, hier ist jemand, der sich mit THREE.js echt auskennt.

Danke schonmal.

[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

[Orlok]

Hallo

Noch ein kleiner Nachtrag:

Ich habe gerade gesehen, dass das Camera-Interface von THREE.js auch über eine Methode lookAt verfügt, mittels derer man die Koordinaten festlegen kann, auf welche die Kamera gerichtet sein soll.

const target = new THREE.Vector3(0, 5, 0); // x, y, z

camera.lookAt(target);

Außerdem kannst du, wenn ich das richtig sehe, über die Eigenschaft zoom die Entfernung beeinflussen, wobei hier ein Faktor und kein absoluter Wert anzugeben ist, also etwa:

camera.zoom = 1.5;

Inklusive des bereits gesagten, solltest du nun also eigentlich alle nötigen Informationen haben, um die Objekte die du zeichnen willst im sichtbaren Bereich unterzubringen.

Gruß,

Orlok

[MetaGriever]

Aktuell habe ich es gelöst, indem ich vom hauptknoten der elemente (diese sind untereinander verschachtelt) ein boundingbox von THREE.js errechnen lasse und die camera dann einfach nach x und y moven sowie nach xyz schauen lasse (lookAt) ... nun ist das problem, dass ich den Viewport bzw. den zoom der kamera korrekt anpassen lassen will, dass das erzeugte (dynamisch ...) gesamtobjekt genau in den rahmen skaliert/gezoomt wird. Unabhängig ob es kleiner oder größer ist.

also zentriert hab ichs schon. zoom fehlt noch.