Three.js Camera Concise Tutorial

Kurzes Tutorial zur Three.js-Kamera

2024-07-12

Die Kamerakalibrierung ist ein grundlegendes Konzept in der 3D-Computergrafik, bei dem eine virtuelle Kamera eingerichtet wird, um die Perspektive und das Verhalten einer realen Kamera zu simulieren. In Three.js, einer beliebten JavaScript-Bibliothek für 3D-Rendering, ist das Verständnis der Kamerakalibrierung von entscheidender Bedeutung für die Erstellung realistischer und immersiver 3D-Szenen. In diesem Artikel befassen wir uns mit den Grundlagen der Kamerakalibrierung in Three.js für Anfänger, die ihre 3D-Grafikfähigkeiten verbessern möchten.

Voraussetzungen: Bevor Sie sich mit der Kamerakalibrierung befassen, müssen Sie über grundlegende Kenntnisse von JavaScript, HTML und Three.js verfügen. Kenntnisse im Umgang mit 3D-Koordinaten, Transformationen und Rendering sind ebenfalls hilfreich.

NSDT-Tool-Empfehlung： Three.js AI Texture Development Kit - YOLO-Generator für synthetische Daten - GLTF/GLB Online-Bearbeitung - Online-Konvertierung des 3D-Modellformats - Programmierbarer 3D-Szeneneditor - REVIT-Export-3D-Modell-Plug-in - Semantische Suchmaschine für 3D-Modelle - Three.js-Entwicklungskit für virtuelle Achsen - Online-Oberflächenreduzierung für 3D-Modelle - STL-Modell online schneiden

1. Richten Sie die Umgebung ein

Erstellen Sie zunächst eine HTML-Datei mit dem erforderlichen Boilerplate-Code, einschließlich der Three.js-Bibliothek:


<!DOCTYPE html>
<html>
<head>
    <title>Camera Calibration in Three.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Your Three.js code will go here
    </script>
</body>
</html>

2. Erstellen Sie Szenen und Kameras

Um Three.js zu initialisieren, erstellen Sie eine Szene, eine Kamera und einen Renderer:


// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. Positionieren Sie die Kamera

Die Position der Kamera bestimmt den Blickwinkel, aus dem die Szene gerendert wird. Sie können die Kamera mithilfe ihrer Positionseigenschaft im 3D-Raum positionieren:

camera.position.set(0, 5, 10);

Dieser Code setzt die Position der Kamera auf (0, 5, 10), was bedeutet, dass sie sich in der 3D-Welt bei x=0, y=5 und z=10 befindet.

4. Zeigen Sie auf die Kamera

KameralookAtMit der Methode können Sie den Punkt definieren, auf den es schauen soll:


const target = new THREE.Vector3(0, 0, 0);
camera.lookAt(target);

In diesem Beispiel ist die Kamera auf den Punkt (0, 0, 0) ausgerichtet, der den Ursprung der Szene darstellt.

5. Sichtfeld (FOV)

Das Sichtfeld (FOV) der Kamera bestimmt den Umfang der durch die Kamera sichtbaren Szene. Je höher der FOV-Wert, desto breiter das Sichtfeld, und je niedriger der Wert, desto größer ist das Sichtfeld.Sie können verwendenfovAttributanpassung FOV:

camera.fov = 60; // Example FOV value in degrees

6. Seitenverhältnis

Das Seitenverhältnis der Kamera bestimmt die Form der gerenderten Szene. Es wird normalerweise auf die Breite des Ansichtsfensters dividiert durch seine Höhe eingestellt:


const aspectRatio = window.innerWidth / window.innerHeight;
camera.aspect = aspectRatio;

7. Nahe Clipping-Ebene und entfernte Clipping-Ebene

Die Nah- und Fernausschnittebenen definieren den sichtbaren Entfernungsbereich von der Kamera. Objekte, die näher als die nahe Ebene oder weiter als die ferne Ebene sind, werden abgeschnitten und nicht gerendert.Sie können verwendennearUndfarEigenschaften legen diese Werte fest:


camera.near = 0.1;
camera.far = 1000;

8. Blende

Die Blende, auch „Kamerablende“ oder „Objektivblende“ genannt, ist ein Schlüsselfaktor bei der Kamerakalibrierung und beeinflusst die Schärfentiefe und die in die Kamera einfallende Lichtmenge. In Three.js können wir den Blendeneffekt simulieren, indem wir die Blendeneigenschaft der Kamera anpassen.


// Aperture (Camera's f-stop) - Controls depth of field and light gathering
const aperture = 0.1; // Increase this value for a shallower depth of field
camera.aperture = aperture;

9. Fügen Sie der Szene Objekte hinzu

Bevor wir die Szene rendern, fügen wir einige 3D-Objekte hinzu, um die Kalibrierung besser sichtbar zu machen:


const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

10. Rendern Sie die Szene

Nachdem wir nun die Szene, die Kamera und die Objekte eingerichtet haben, können wir die Szene rendern:


function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

11. Fazit

Glückwunsch! Sie haben Ihren ersten Schritt in die Welt der Three.js-Kamerakalibrierung gemacht. Durch das Verständnis der Kameraeigenschaften und ihrer Auswirkungen auf die gerenderte Szene können Sie visuell ansprechende und immersive 3D-Erlebnisse schaffen. Experimentieren Sie mit verschiedenen Kamerapositionen, FOV-Werten und Objekten in der Szene, um das volle Potenzial von Three.js und der Kamerakalibrierung auszuschöpfen.

Ursprünglicher Link:Ein kurzes Tutorial zur Three.js-Kamera – BimAnt

Technologieaustausch