Kata pengantar
Three.js adalah perpustakaan 3DJS, salah satu kerangka kerja open source WebGL yang paling bagus. Selain WebGL, Three.js juga menyediakan renderer berdasarkan kanvas dan tag SVG. Disarankan untuk menggunakan Chrome atau Firefox untuk debugging.
1. Kamera
Kamera dalam grafik mendefinisikan bagaimana ruang tiga dimensi ke layar dua dimensi diproyeksikan.
Untuk metode proyeksi, kamera dibagi menjadi kamera proyeksi ortogonal dan kamera proyeksi perspektif.
2. Perbedaan dan ruang lingkup penerapan kedua kamera
Proyeksi ortogonal:
Proyeksi Perspektif:
Proyeksi ortogonal seperti gambar dalam kelas matematika; Sementara proyeksi perspektif memiliki titik dasar, yaitu, objek di kejauhan lebih kecil dari objek di dekat, dan lebih besar dan lebih kecil di dekatnya.
Untuk perangkat lunak menggambar dan pemodelan, proyeksi ortogonal biasanya digunakan; Untuk sebagian besar aplikasi lainnya, proyeksi perspektif biasanya digunakan.
3. Kamera Proyeksi Orthogonal
Konstruktor kamera proyeksi ortogonal:
Three.othographiccamera (kiri, kanan, atas, bawah, dekat, jauh)
Enam parameter mewakili posisi enam wajah yang ditangkap oleh kamera proyeksi ortogonal.
Di antara mereka, dekat mewakili jarak vertikal antara bidang dekat dan titik tengah kamera ; FAR mewakili jarak vertikal antara bidang jauh dan titik tengah kamera .
Untuk mempertahankan rasio horizontal dan vertikal kamera , rasio (kiri-kanan) terhadap (top-bawah) harus konsisten dengan rasio aspek kanvas.
Seperti yang dapat dilihat dari gambar, nilai -nilai dekat dan jauh harus positif, dan jauh di dekat . Jika dua nilai terakhir adalah (0, 0), yaitu, nilai -nilai dekat dan jauh sama, kedalaman badan penglihatan hilang, dan seluruh badan penglihatan ditekan ke dalam pesawat, layar akan salah.
4. Contoh Kamera Proyeksi Orthogonal
Kode Sumber:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> 3.js tes 2 </itement> </head> <body onload = "init ()"> <canvas id = "MainCanvas"> </cancript/"THREPK =" TEXT/TEXT/JAVASCRIPT "SCRIPS =" SCRIPS = "JS/THRIPM/THRIPM/THRIPM/THRIPK/THRIPS/THREPK/THREPK/THREPK/THRIPS/THREPK/JAVAS/THRIPS = type = "text/javascript"> function init () {var renderer = new three.webglrenderer ({canvas: document.geteLementById ('mainCanvas')}); renderer.setClearColor (0x0000000); var scene = new three.scene (); // atur kamera var kamera = tiga.othographycamera baru (-2, 2, 1.5, -1.5, 1, 10); kamera.position.set (0, 0, 5); //camera.lookat(new Three.vector3 (0, 0, 0)); scene.add (kamera); // Buat kubus var cube = baru tiga.mesh (tiga.cubegeometry baru (1, 1, 1), tiga.MeshBasicMATerial baru ({Color: 0xff0000, wireframe: true})); scene.add (kubus); // render renderer.render (adegan, kamera); } </script> </body> </html> Di mana, jika properti wireframe dari THREE.MeshBasicMaterial benar , bahan tersebut akan diterjemahkan ke dalam rangka pemadaman.
Anda dapat melihat bahwa tepi di belakang posisi saat ini akan sepenuhnya bertepatan dengan yang ada di depan:
4.1 Ubah rasio panjang dan lebar tampilan
Di sini, rasio aspek kanvas adalah 4: 3, jarak horizontal kamera adalah 4, dan jarak vertikal adalah 3, sehingga rasio panjang dan lebar tetap tidak berubah (1: 1).
Jika jarak horizontal kamera dikurangi menjadi 2,
var kamera = tiga.othographiccamera baru (-1,1,1.5, -1.5,1,10);
Objek akan diperpanjang:
Bidang pandang kamera telah menjadi lebih sempit, menghasilkan peningkatan proporsi lateral kubus di dalam bidang pandang, yang dimanifestasikan sebagai pelebaran kubus.
4.2 Ubah Posisi Kamera
Posisi kamera dalam contohnya adalah (0,0,5). Karena kamera ditempatkan ke arah negatif sumbu-z secara default, Anda dapat melihat kubus di titik asal.
Pindahkan posisi kamera dengan 1 unit ke kanan:
var kamera = tiga.othographiccamera baru (-2,2,1.5, -1.5,1,10); kamera.position.set (1,0,5);
Kamera menghadap objek, sehingga kamera bergerak ke kanan dan objek yang diterangi bergerak ke kiri:
4.3 Ubah posisi tampilan
Atur tampilan ke kanan:
var kamera = tiga.othographiccamera baru (-1,3,1.5, -1.5,1,10); kamera.position.set (1,0,5);
Sama seperti memindahkan kamera dengan benar.
4.4 Ubah sudut kamera
kamera.position.set (4, -3,5); kamera.lookat (baru tiga.vector3 (0, 0, 0));
Tapi sekarang kamera mengamati sepanjang arah negatif sumbu z, sehingga kubus tidak dapat diamati, hanya sepotong hitam yang terlihat. Kita dapat menentukan arah asal melalui fungsi lookat:
kamera.lookat (baru tiga.vector3 (0, 0, 0));
Perhatikan bahwa fungsi lookAt menerima instance dari THREE.Vector3 , jangan menulisnya sebagai camera.lookAt(0, 0, 0)
Oke, di atas adalah seluruh konten dari kamera proyeksi ortogonal Three.js Learning. Saya berharap akan sangat membantu bagi semua orang untuk belajar tiga.js. Editor akan memperbarui artikel tentang tiga.js satu demi satu. Silakan terus perhatikan wulin.com.