Um OrbitControls in Ihrem Code zu verwenden, müssen Sie zuerst das Modul `three-orbitcontrols` installieren oder das Skript `OrbitControls.js` von einem CDN laden. Dann können Sie eine Instanz von OrbitControls erstellen, die Ihre Kamera und Ihr Renderer-Element als Parameter nimmt. Sie können auch verschiedene Eigenschaften und Ereignisse von OrbitControls anpassen, um das gewünschte Verhalten zu erzielen. Hier sind einige Beispiele für die Verwendung von OrbitControls in Ihrem Code:
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
- Um eine Instanz von OrbitControls zu erstellen, können Sie den folgenden Code verwenden²:
Code: Alles auswählen
const controls = new OrbitControls(camera, renderer.domElement);
- Um die Kamera auf einen bestimmten Punkt auszurichten, können Sie die `target`-Eigenschaft von OrbitControls verwenden²:
Code: Alles auswählen
// camera.lookAt (0.5, 0.5, 0.5); // alternative Methode
controls.target.set (.5, .5, .5); // setzt den Zielpunkt auf (0.5, 0.5, 0.5)
controls.update (); // aktualisiert die Kameraansicht
- Um auf Änderungen der Kameraansicht zu reagieren, können Sie die `change`-, `start`- und `end`-Ereignisse von OrbitControls verwenden²:
Code: Alles auswählen
controls.addEventListener ('change', () => console.log ("Controls Change")); // wird ausgelöst, wenn sich die Kameraansicht ändert
controls.addEventListener ('start', () => console.log ("Controls Start Event")); // wird ausgelöst, wenn der Benutzer mit der Maus oder dem Touchpad interagiert
controls.addEventListener ('end', () => console.log ("Controls End Event")); // wird ausgelöst, wenn der Benutzer die Interaktion beendet
- Um die Kamera automatisch um das Ziel rotieren zu lassen, können Sie die `autoRotate`- und `autoRotateSpeed`-Eigenschaften von OrbitControls verwenden²:
Code: Alles auswählen
controls.autoRotate = true; // aktiviert die automatische Rotation
controls.autoRotateSpeed = 10; // setzt die Geschwindigkeit der Rotation in Grad pro Sekunde
- Um die Dämpfung der Kamerabewegung zu aktivieren, können Sie die `enableDamping`- und `dampingFactor`-Eigenschaften von OrbitControls verwenden²:
Code: Alles auswählen
controls.enableDamping = true; // aktiviert die Dämpfung
controls.dampingFactor = .01; // setzt den Dämpfungsfaktor zwischen 0 und 1
- Um die Tastatursteuerung zu aktivieren, können Sie die `enableKeys`-, `listenToKeyEvents`- und `keys`-Eigenschaften von OrbitControls verwenden²:
Code: Alles auswählen
controls.enableKeys = true; // aktiviert die Tastatursteuerung
//older versions
// controls.listenToKeyEvents (document.body); // registriert einen EventListener für Tastatureingaben auf dem angegebenen Element
controls.keys = { // definiert die Tasten für jede Richtung
LEFT: "ArrowLeft", //left arrow
UP: "ArrowUp", // up arrow
RIGHT: "ArrowRight", // right arrow
BOTTOM: "ArrowDown" // down arrow
}
- Um die Maussteuerung anzupassen, können Sie die `mouseButtons`-Eigenschaft von OrbitControls verwenden²:
Code: Alles auswählen
controls.mouseButtons = { // definiert die Aktion für jede Maustaste
LEFT: THREE.MOUSE.ROTATE, // linke Maustaste zum Rotieren der Kamera um das Ziel
MIDDLE: THREE.MOUSE.DOLLY, // mittlere Maustaste zum Zoomen der Kamera
RIGHT: THREE.MOUSE.PAN // rechte Maustaste zum Verschieben der Kamera parallel zur Bildschirmebene
}
- Um die Touch-Steuerung anzupassen, können Sie die `touches`-Eigenschaft von OrbitControls verwenden²:
Code: Alles auswählen
controls.touches = { // definiert die Aktion für jede Anzahl von Touchpunkten
ONE: THREE.TOUCH.ROTATE, // ein Touchpunkt zum Rotieren der Kamera um das Ziel
TWO: THREE.TOUCH.DOLLY_PAN // zwei Touchpunkte zum Zoomen und Verschieben der Kamera
}
- Um das Verschieben der Kamera in Bildschirmraumkoordinaten zu aktivieren, können Sie die `screenSpacePanning`-Eigenschaft von OrbitControls verwenden²:
Code: Alles auswählen
controls.screenSpacePanning = true; // aktiviert das Verschieben in Bildschirmraumkoordinaten
- Um die minimalen und maximalen Winkel für die horizontale und vertikale Rotation der Kamera zu begrenzen, können Sie die `minAzimuthAngle`, `maxAzimuthAngle`, `minPolarAngle` und `maxPolarAngle`-Eigenschaften von OrbitControls verwenden²:
Code: Alles auswählen
controls.minAzimuthAngle = 0; // setzt den minimalen horizontalen Winkel in Radiant
controls.maxAzimuthAngle = Math.PI / 2; // setzt den maximalen horizontalen Winkel in Radiant
controls.minPolarAngle = 0; // setzt den minimalen vertikalen Winkel in Radiant
controls.maxPolarAngle = Math.PI; // setzt den maximalen vertikalen Winkel in Radiant
- Um die minimale und maximale Entfernung der Kamera vom Ziel zu begrenzen, können Sie die `minDistance`- und `maxDistance`-Eigenschaften von OrbitControls verwenden²:
Code: Alles auswählen
controls.maxDistance = 4; // setzt die maximale Entfernung in Einheiten
controls.minDistance = 2; // setzt die minimale Entfernung in Einheiten
Ich hoffe, diese Beispiele sind nützlich für Sie. Wenn Sie mehr über OrbitControls erfahren möchten, können Sie sich die Web-Suchergebnisse ansehen¹²³ oder die offizielle Dokumentation lesen. Wenn Sie weitere Fragen haben, können Sie mich gerne fragen.
Quelle: Unterhaltung mit Bing, 3.8.2023
(1) How to use OrbitControls in Three.js Editor project.
https://stackoverflow.com/questions/597 ... or-project.
(2) OrbitControls - Three.js Tutorials - sbcode.net.
https://sbcode.net/threejs/orbit-controls/.
(3) three-orbitcontrols examples - CodeSandbox.
https://codesandbox.io/examples/package ... itcontrols.
