Tutorial Ringkas Kamera Three.js

2024-07-12

Kalibrasi kamera adalah konsep dasar dalam grafik komputer 3D yang melibatkan pengaturan kamera virtual untuk mensimulasikan perspektif dan perilaku kamera dunia nyata. Di Three.js, pustaka JavaScript rendering 3D yang populer, memahami kalibrasi kamera sangat penting untuk menciptakan pemandangan 3D yang realistis dan imersif. Pada artikel ini, kita akan menjelajahi dasar-dasar kalibrasi kamera di Three.js, untuk pemula yang ingin meningkatkan keterampilan grafis 3D mereka.

Prasyarat: Sebelum mendalami kalibrasi kamera, Anda harus memiliki pemahaman dasar tentang JavaScript, HTML, dan Three.js. Keakraban dengan koordinat 3D, transformasi, dan rendering juga akan membantu.

Rekomendasi alat NSDT： Kit Pengembangan Tekstur AI Three.js - Generator data sintetis YOLO - Pengeditan online GLTF/GLB - Konversi online format model 3D - Editor adegan 3D yang dapat diprogram - REVIT mengekspor plug-in model 3D - Mesin pencari semantik model 3D - Kit pengembangan sumbu virtual Three.js - Pengurangan permukaan online model 3D - Pemotongan online model STL

1. Siapkan lingkungan

Pertama, buat file HTML yang berisi kode boilerplate yang diperlukan, termasuk perpustakaan 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. Buat adegan dan kamera

Untuk menginisialisasi Three.js, buat scene, kamera, dan 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. Posisikan kamera

Posisi kamera menentukan sudut pandang dari mana adegan tersebut ditampilkan. Anda dapat memposisikan kamera dalam ruang 3D menggunakan properti posisinya:

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

Kode ini menyetel posisi kamera ke (0, 5, 10), yang artinya berada di x=0, y=5, dan z=10 di dunia 3D.

4. Arahkan ke kamera

kameralookAtMetode memungkinkan Anda menentukan titik yang harus diperhatikan:


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

Dalam contoh ini, kamera diorientasikan ke titik (0, 0, 0) yang merupakan asal mula pemandangan.

5. Bidang pandang (FOV)

Bidang pandang kamera (FOV) menentukan sejauh mana pemandangan yang terlihat melalui kamera. Semakin tinggi nilai FOV maka semakin luas bidang pandangnya, dan semakin rendah nilainya maka semakin besar pula bidang pandangnya.Anda dapat gunakanfovFOV penyesuaian atribut:

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

6. Rasio aspek

Rasio aspek kamera menentukan bentuk pemandangan yang dirender. Biasanya diatur ke lebar area pandang dibagi dengan tingginya:


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

7. Bidang kliping dekat dan bidang kliping jauh

Bidang kliping dekat dan jauh menentukan rentang jarak tampak dari kamera. Objek yang lebih dekat dari bidang dekat atau lebih jauh dari bidang jauh akan terpotong dan tidak dirender.Anda dapat gunakannearDanfarProperti menetapkan nilai-nilai ini:


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

8. Bukaan

Apertur, juga dikenal sebagai "bukaan kamera" atau "bukaan lensa", merupakan faktor kunci dalam kalibrasi kamera dan memengaruhi kedalaman bidang dan jumlah cahaya yang masuk ke kamera. Di Three.js, kita dapat mensimulasikan efek aperture dengan menyesuaikan properti aperture kamera.


// 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. Tambahkan objek ke tempat kejadian

Sebelum merender adegan, mari tambahkan beberapa objek 3D agar kalibrasi lebih terlihat:


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

10. Render adegannya

Sekarang setelah kita menyiapkan pemandangan, kamera, dan objek, kita dapat merender pemandangan tersebut:


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

11. Kesimpulan

Selamat! Anda telah mengambil langkah pertama Anda ke dunia kalibrasi kamera Three.js. Dengan memahami properti kamera dan dampaknya terhadap adegan yang dirender, Anda dapat menciptakan pengalaman 3D yang menarik dan imersif secara visual. Bereksperimenlah dengan berbagai posisi kamera, nilai FOV, dan objek dalam pemandangan untuk mewujudkan potensi penuh Three.js dan kalibrasi kamera.

Tautan asli:Tutorial singkat tentang kamera Three.js - BimAnt

Berbagi teknologi