Three.js Camera Concise Tutorial

Συνοπτικό μάθημα Three.js Camera

2024-07-12

Η βαθμονόμηση κάμερας είναι μια θεμελιώδης ιδέα στα τρισδιάστατα γραφικά υπολογιστή που περιλαμβάνει τη ρύθμιση μιας εικονικής κάμερας για την προσομοίωση της προοπτικής και της συμπεριφοράς μιας κάμερας πραγματικού κόσμου. Στο Three.js, μια δημοφιλή βιβλιοθήκη JavaScript απόδοσης 3D, η κατανόηση της βαθμονόμησης της κάμερας είναι ζωτικής σημασίας για τη δημιουργία ρεαλιστικών και καθηλωτικών σκηνών 3D. Σε αυτό το άρθρο, θα εξερευνήσουμε τα βασικά στοιχεία της βαθμονόμησης κάμερας στο Three.js, για αρχάριους που θέλουν να βελτιώσουν τις δεξιότητές τους στα τρισδιάστατα γραφικά.

Προϋποθέσεις: Πριν ξεκινήσετε τη βαθμονόμηση της κάμερας, πρέπει να έχετε βασική κατανόηση των JavaScript, HTML και Three.js. Η εξοικείωση με τις τρισδιάστατες συντεταγμένες, τους μετασχηματισμούς και την απόδοση θα είναι επίσης χρήσιμη.

Σύσταση εργαλείου NSDT： Three.js AI Texture Development Kit - Γεννήτρια συνθετικών δεδομένων YOLO - GLTF/GLB ηλεκτρονική επεξεργασία - Διαδικτυακή μετατροπή μορφής τρισδιάστατου μοντέλου - Προγραμματιζόμενο πρόγραμμα επεξεργασίας 3D σκηνής - Προσθήκη εξαγωγής τρισδιάστατου μοντέλου REVIT - Μηχανή σημασιολογικής αναζήτησης τρισδιάστατων μοντέλων - Κιτ ανάπτυξης εικονικού άξονα Three.js - Τρισδιάστατο μοντέλο online μείωση επιφάνειας - Μοντέλο STL online κοπή

1. Ρυθμίστε το περιβάλλον

Αρχικά, δημιουργήστε ένα αρχείο HTML που περιέχει τον απαραίτητο κώδικα boilerplate, συμπεριλαμβανομένης της βιβλιοθήκης Three.js:


<!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. Δημιουργήστε σκηνές και κάμερες

Για να αρχικοποιήσετε το Three.js, δημιουργήστε μια σκηνή, μια κάμερα και μια απόδοση:


// 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. Τοποθετήστε την κάμερα

Η θέση της κάμερας καθορίζει την οπτική γωνία από την οποία αποδίδεται η σκηνή. Μπορείτε να τοποθετήσετε την κάμερα σε χώρο 3D χρησιμοποιώντας την ιδιότητα θέσης της:

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

Αυτός ο κωδικός ορίζει τη θέση της κάμερας σε (0, 5, 10), που σημαίνει ότι είναι x=0, y=5 και z=10 στον τρισδιάστατο κόσμο.

4. Δείξτε προς την κάμερα

ΦΩΤΟΓΡΑΦΙΚΗ ΜΗΧΑΝΗlookAtΗ μέθοδος σάς επιτρέπει να ορίσετε το σημείο που πρέπει να κοιτάξει:


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

Σε αυτό το παράδειγμα, η κάμερα είναι προσανατολισμένη προς το σημείο (0, 0, 0), το οποίο είναι η αρχή της σκηνής.

5. Οπτικό πεδίο (FOV)

Το οπτικό πεδίο της κάμερας (FOV) καθορίζει την έκταση της σκηνής που είναι ορατή μέσω της κάμερας. Όσο υψηλότερη είναι η τιμή FOV, τόσο μεγαλύτερο είναι το οπτικό πεδίο και όσο χαμηλότερη είναι η τιμή, τόσο πιο μεγεθύνεται το οπτικό πεδίο.μπορείς να χρησιμοποιήσειςfovΠροσαρμογή χαρακτηριστικών FOV:

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

6. Λόγος διαστάσεων

Ο λόγος διαστάσεων της κάμερας καθορίζει το σχήμα της σκηνής που αποδίδεται. Συνήθως ορίζεται στο πλάτος της θύρας προβολής διαιρεμένο με το ύψος της:


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

7. Κοντά σε επίπεδο αποκοπής και μακρινό επίπεδο αποκοπής

Το κοντινό και το μακρινό επίπεδο αποκοπής ορίζουν το ορατό εύρος απόστασης από την κάμερα. Τα αντικείμενα που είναι πιο κοντά από το κοντινό επίπεδο ή πιο μακριά από το μακρινό επίπεδο θα κοπούν και δεν θα αποδοθούν.μπορείς να χρησιμοποιήσειςnearκαιfarΟι ιδιότητες ορίζουν αυτές τις τιμές:


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

8. Διάφραγμα

Το διάφραγμα, γνωστό και ως "διάφραγμα κάμερας" ή "διάφραγμα φακού", είναι ένας βασικός παράγοντας στη βαθμονόμηση της κάμερας και επηρεάζει το βάθος πεδίου και την ποσότητα φωτός που εισέρχεται στην κάμερα. Στο Three.js, μπορούμε να προσομοιώσουμε το εφέ διαφράγματος προσαρμόζοντας την ιδιότητα διαφράγματος της κάμερας.


// 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. Προσθέστε αντικείμενα στη σκηνή

Πριν αποδώσουμε τη σκηνή, ας προσθέσουμε μερικά τρισδιάστατα αντικείμενα για να κάνουμε τη βαθμονόμηση πιο ορατή:


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

10. Αποδώστε τη σκηνή

Τώρα που έχουμε ρυθμίσει τη σκηνή, την κάμερα και τα αντικείμενα, μπορούμε να αποδώσουμε τη σκηνή:


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

11. Συμπέρασμα

Συγχαρητήρια! Κάνατε το πρώτο σας βήμα στον κόσμο της βαθμονόμησης κάμερας Three.js. Κατανοώντας τις ιδιότητες της κάμερας και τον αντίκτυπό τους στη σκηνή που αποδίδεται, μπορείτε να δημιουργήσετε οπτικά συναρπαστικές και καθηλωτικές τρισδιάστατες εμπειρίες. Πειραματιστείτε με διαφορετικές θέσεις κάμερας, τιμές FOV και αντικείμενα στη σκηνή για να αξιοποιήσετε πλήρως τις δυνατότητες του Three.js και της βαθμονόμησης κάμερας.

Αρχικός σύνδεσμος:Ένα σύντομο μάθημα για την κάμερα Three.js - BimAnt

Κοινή χρήση τεχνολογίας