perkenalan
Artikel ini terutama menjelaskan konsep yang relevan dari tiga.js dan membantu pembaca mengembangkan pemahaman yang relatif lengkap tentang tiga.js dan pengetahuan terkait.
Web telah berkembang pesat dalam beberapa tahun terakhir. Dengan popularitas HTML5, kemampuan kinerja halaman web menjadi semakin kuat. Sudah ada banyak animasi kompleks dan efek yang sangat indah di halaman web.
Tetapi orang selalu serakah. Jadi, apa lagi yang bisa dilakukan di atas ini? Salah satunya adalah menggambar grafik 3D kinerja tinggi di halaman web melalui WebGL.
OpenGL, WebGL ke Three.js
Banyak orang mungkin mendengar tentang OpenGL , yang merupakan perpustakaan grafis lintas platform yang paling umum digunakan.
WebGL adalah standar grafis berorientasi web yang dirancang oleh OpenGL, menyediakan serangkaian API JavaScript yang melaluinya rendering grafis akan dimanfaatkan untuk mencapai kinerja yang lebih tinggi.
Three.js adalah perpustakaan grafis yang mudah digunakan yang dibentuk dengan merangkum dan menyederhanakan antarmuka WebGL.
Sederhananya: WebGL dapat dianggap sebagai antarmuka yang disediakan oleh browser. Dalam JavaScript, API ini dapat digunakan secara langsung untuk menggambar grafik 3D; dan Three.js membantu kita merangkum antarmuka ini menjadi lebih berguna.
Perbandingan WebGL dan Three.js
Karena kami memiliki WebGL, mengapa kami masih membutuhkan tiga.js?
Ini karena ambang batas untuk WebGL relatif tinggi dan membutuhkan pengetahuan yang relatif lebih matematis. Meskipun WebGL menyediakan API front-end, WebGL dan pengembangan front-end pada dasarnya adalah dua arah yang berbeda, dan ada sedikit tumpang tindih pengetahuan. Relevansinya adalah mereka semua ada di platform web dan mereka semua menggunakan JavaScript. Seorang programmer front-end mungkin terbiasa dengan geometri analitik, tetapi harus ada sangat sedikit yang masih terbiasa dengan aljabar linier (misalnya, cobalah untuk menemukan matriks transpose terbalik?), Belum lagi bahwa signifikansi fisik dari operasi matriks ditekankan dalam penggunaan, yang juga relatif hilang dalam pengajaran.
Oleh karena itu, cukup sulit bagi insinyur front-end untuk memulai dengan WebGL dalam waktu singkat.
Oleh karena itu, tiga.js memiliki enkapsulasi antarmuka yang sangat baik yang disediakan oleh WebGL, menyederhanakan banyak detail dan sangat mengurangi biaya belajar. Dan, ada sedikit kehilangan fleksibilitas di WebGL.
Oleh karena itu, dimulai dengan tiga.js layak direkomendasikan, yang memungkinkan Anda untuk menghadapi sebagian besar skenario permintaan setelah studi yang lebih pendek.
Masalah belajar Three.js
Memulai dengan tiga.js relatif sederhana, tetapi ketika kami benar -benar belajar, kami akan menemukan masalah yang memalukan: ada sangat sedikit materi pembelajaran terkait.
Biasanya perpustakaan populer ini memiliki dokumen yang sangat lengkap, dan seringkali cara terbaik untuk belajar dari dokumen resmi atau tutorial pengantar resmi. Tapi tiga tidak, dokumentasinya terlalu ringkas untuk pemula.
Namun, pejabat memberikan variasi contoh yang sangat besar, dan hampir semua penggunaan yang Anda butuhkan tercermin dalam contoh tertentu. Tetapi contoh -contoh ini tidak cocok untuk memulai, tetapi cocok untuk pembelajaran lebih lanjut setelah memulai.
Berikut beberapa tutorial yang relatif bagus:
Tiga.js Memulai Panduan
Ini adalah tutorial pengantar ringan yang bagus untuk Three.js. Penulis memiliki gaya penulisan yang sangat baik dan pengetahuan dasar dijelaskan secara ringkas dan mudah dimengerti.
Panduan Pengembangan Three.js (Versi Cina Pertama)
Belajar Three.js- Edisi Kedua
Belajar Three.js: Perpustakaan 3D JavaScript untuk WebGL adalah beberapa dan buku pengantar terbaik dari Three.js, yang menjelaskan berbagai fungsi Three.js dengan cara yang lebih komprehensif .
Jika Anda memiliki kemampuan, disarankan untuk membaca edisi kedua versi bahasa Inggris, yang diterbitkan pada tahun 2015, yang sangat berbeda dari Three.js saat ini.
Versi Cina diterjemahkan dari edisi pertama buku asli yang diterbitkan pada tahun 2012. Sebagian besar konsep ini berlaku, tetapi banyak detail telah berubah.
Tutorial Three.js
Ini adalah terjemahan dari tutorial asing, dengan total enam artikel . Saya tidak menjelaskan banyak hal, tetapi lebih tentang cara menggunakan setiap fungsi dasar. Ini lebih cocok untuk siswa dengan beberapa yayasan grafis.
Tentu saja, bahan -bahan ini jelas tidak cukup selama proses pembelajaran yang sebenarnya. Saat mengalami masalah, Anda masih harus memeriksa materi sendiri. Namun, saya ingin mengingatkan Anda bahwa tiga.js sudah diperbarui cukup sering, sekarang ini adalah versi R80. Sejak R1 dirilis pada April 2010, ini adalah versi ke -72 (beberapa nomor versi di tengah telah dilewati). Oleh karena itu, beberapa informasi yang ditemukan di internet mungkin tidak cocok untuk versi saat ini , jadi Anda perlu memperhatikan identifikasi (informasi yang direkomendasikan di atas juga memiliki lebih banyak masalah seperti itu).
Beberapa konsep dalam tiga.js
Untuk menampilkan grafik 3D di layar, idenya umumnya seperti ini:
Membangun ruang tiga dimensi
Dalam tiga, disebut adegan (adegan) untuk memilih titik pengamatan dan menentukan arah/sudut pengamatan, dll.
Tiga menyebutnya kamera (kamera) untuk menambahkan objek untuk observasi ke tempat kejadian
Ada banyak jenis objek dalam tiga, termasuk mesh, garis, titik, dll. Mereka semua mewarisi dari kelas Object3D membuat adegan yang diamati ke area tertentu di layar.
Gunakan renderer dalam tiga untuk melakukan ini
Mari kita lihat konsep -konsep ini dalam tiga detail.
Pemandangan
Adegan ini adalah wadah dari semua objek, dan juga sesuai dengan dunia tiga dimensi yang kita buat.
Sistem Koordinat Kamera
Kamera adalah pengamat di dunia tiga dimensi. Untuk mengamati dunia ini, pertama -tama kita harus menggambarkan posisi di ruang angkasa.
Sistem koordinat tangan kanan umum digunakan dalam tiga.
Proyeksi tiga dimensi
Ada dua jenis kamera dalam tiga, yaitu kamera proyeksi ortografis tiga. Kamera athografis dan kamera proyeksi perspektif tiga.
Perbedaan antara proyeksi ortogonal dan proyeksi perspektif ditunjukkan pada gambar di atas. Gambar kiri adalah proyeksi ortogonal. Cahaya yang dipancarkan oleh objek diproyeksikan sejajar dengan layar, dan kotak -kotak jauh dan dekat adalah ukuran yang sama; Gambaran yang tepat adalah proyeksi perspektif, yang besar di dekat dan kecil di jauh dan kecil, yang sejalan dengan perasaan kami yang biasa untuk memandang berbagai hal.
Wikipedia: Proyeksi 3D
Kamera proyeksi ortogonal
Catatan: "Sudut pandang" pada gambar sesuai dengan kamera dalam tiga.
Di sini kita menambahkan konsep tubuh visual: Tubuh visual adalah tubuh geometris, hanya objek dalam tubuh visual yang akan dilihat oleh kita, dan objek di luar tubuh visual akan terputus. Ini untuk menghapus operasi yang tidak perlu.
Tubuh tampilan kamera proyeksi ortografis adalah kubus. Konstruktor ortografiscamera adalah sebagai berikut: ortografikamera (kiri, kanan, atas, bawah, dekat, jauh)
Kamera itu sendiri dapat dianggap sebagai titik, sedangkan kiri menunjukkan jarak antara bidang kiri dan kamera di arah kiri dan kanan. Hal yang sama berlaku untuk parameter lain. Oleh karena itu, enam parameter mendefinisikan posisi dari enam wajah masing -masing dari badan penglihatan.
Kira -kira dapat diasumsikan bahwa benda -benda di badan penglihatan diproyeksikan sejajar dengan pesawat dekat, dan kemudian gambar pada pesawat dekat diterjemahkan ke layar.
Kamera Proyeksi Perspektif
Tubuh tontonan kamera proyeksi perspektif adalah platform empat tepi, dan konstruktornya adalah sebagai berikut: PerspectiveCamera (FOV, aspek, dekat, jauh)
FOV sesuai dengan perspektif pada gambar, yang merupakan sudut antara sisi atas dan bawah. Aspek adalah rasio aspek dari pesawat dekat. Menambahkan jarak dekat-pesawat dekat dan jarak jauh jauh, satu-satunya cara untuk menentukan adegan visual.
Kamera proyeksi perspektif sangat konsisten dengan perasaan kami yang biasa menonton hal -hal, jadi dalam kebanyakan kasus kami menggunakan kamera proyeksi perspektif untuk menunjukkan efek 3D.
Objek
Dengan kamera, Anda harus melihat sesuatu, kan? Tambahkan beberapa objek ke tempat kejadian.
Ada banyak objek untuk ditampilkan dalam tiga, yang semuanya diwarisi dari kelas Object3D. Di sini kita terutama melihat poin dan poin.
Mesh
Kita semua tahu bahwa di dunia komputer, busur dihubungkan oleh segmen garis hingga yang terdiri dari titik -titik terbatas. Ketika ada banyak garis, itu terlihat seperti busur yang halus.
Model tiga dimensi di komputer serupa. Praktik umum adalah menggambarkannya menggunakan kisi segitiga. Kami menyebut model ini model mesh.
Ini adalah kelinci Stanford yang terkenal. Posisinya dalam grafik 3D mirip dengan Lena, bidang pemrosesan gambar digital yang terkenal.
Lihatlah kelinci ini, ketika jumlah segitiga meningkat, permukaannya menjadi lebih halus/akurat.
Dalam tiga, konstruktor mesh adalah sebagai berikut: mesh (geometri, material)
Geometri adalah bentuknya, bahan adalah bahannya.
Tidak hanya mesh, kedua properti ini digunakan untuk membuat banyak objek. Mari kita lihat dua atribut penting ini.
Geometri
Geometri, bentuk, cukup intuitif. Geometri menggunakan model untuk menyimpan himpunan titik dan hubungan antara titik (yang titik membentuk segitiga) untuk mencapai tujuan menggambarkan bentuk suatu objek.
Tiga memberikan banyak bentuk dasar seperti kubus (sebenarnya kubus), pesawat (sebenarnya persegi panjang), bidang, lingkaran, silinder, dan meja bundar;
Anda juga dapat membangun bentuk dengan mendefinisikan posisi setiap titik sendiri;
Untuk bentuk yang lebih kompleks, kami juga dapat mengimpornya melalui file model eksternal.
Bahan
Material, material, ini tidak intuitif seperti bentuknya.
Bahan sebenarnya adalah kumpulan semua atribut visual kecuali bentuk permukaan objek, seperti warna, tekstur, kehalusan, transparansi, reflektifitas, indeks bias, dan luminositas.
Di sini kita akan berbicara tentang hubungan antara materi, peta dan tekstur.
Materi telah disebutkan di atas, dan itu termasuk peta dan lainnya.
Stiker sebenarnya 'tempel' dan 'tempel', yang mencakup gambar dan di mana gambar harus diposting.
Adapun teksturnya, itu sebenarnya adalah 'gambar'.
Tiga menawarkan berbagai bahan untuk dipilih, dan dapat dengan bebas memilih refleksi difus/specular dan bahan lainnya.
Poin
Setelah berbicara tentang mesh, mari kita lihat objek lain - poin.
Poin sebenarnya adalah kumpulan banyak poin. Itu disebut sistem partikel untuk waktu yang lama sebelumnya. Itu berganti nama menjadi PointCloud dalam versi R68, dan itu berganti nama menjadi poin dalam versi R72. Perubahan nama terutama karena Mr.Doob percaya bahwa sistem partikel harus menjadi sistem lengkap yang mencakup pemrosesan partikel dan sifat fisik terkait, sementara titik dalam tiga jauh lebih sederhana. Jadi akhirnya kelas ini bernama poin.
Efek khas yang dapat digunakan poin untuk dicapai adalah ini: contoh resmi
Lampu
Tuhan berkata: Pasti ada cahaya!
Efek cahaya dan bayangan adalah faktor penting yang memperkaya gambaran.
Tiga menyediakan berbagai sumber cahaya termasuk cahaya ambient cahaya, titik titik titik cahaya titik cahaya, lampu sorot, arah arah cahaya terarah, cahaya belahan cahaya belahan bumi dan cahaya lainnya.
Cukup tambahkan sumber cahaya yang diperlukan ke tempat kejadian.
Renderer
Berbagai objek dibangun di adegan, cahaya, dan kamera yang mengamati objek, sekarang saatnya untuk membuat apa yang Anda lihat ke layar. Itulah yang dilakukan render.
Renderer mengikat objek kanvas dan dapat mengatur properti seperti ukuran, warna latar belakang default, dll.
Panggil fungsi render renderer, lulus dalam adegan dan kamera, dan Anda dapat membuat gambar ke dalam kanvas.
Buat gambarnya bergerak
Sekarang, gambar statis dapat diperoleh, bagaimana bisa bergerak?
Gagasan yang sangat sederhana adalah mengubah posisi, sudut, dan berbagai sifat objek dalam adegan, dan kemudian memanggil fungsi render untuk render.
Jadi bagaimana Anda menentukan waktu rendering ulang?
HTML5 memberi kami requestanImFrame, yang secara otomatis memanggil fungsi yang dilewati sebelum setiap halaman mengecat ulang.
Jika kami membuat ini di awal:
function render () {renderer.render (adegan, kamera);}Ubah saja ini:
function render () {requestanimationframe (render); Object.position.x += 1; renderer.render (adegan, kamera);}Objek bisa bergerak!
Berikan kastanye
Mari kita gunakan contoh sederhana untuk memilah proses ini.
Pertama, tulis halaman dengan elemen kanvas.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> cube </iteme> <script src = "http://sqimg.qq.com/qq_min.min.min_operations/mma/javanli_test/lib/qq_min.min.min.mma html, tubuh {margin: 0; Padding: 0; } #three_canvas {position: absolute; Lebar: 100%; Tinggi: 100%; } </tyle> </head> <body> <canvas id = "tiga_canvas"> </ Canvas> </body> </html>Mari kita lakukan bagian JavaScript di bawah ini
Inisialisasi pertama Renderer
fungsi initrenderer () {width = document.geteLementById ('tiga_canvas'). clientWidth; tinggi = document.getElementById ('tiga_canvas'). ClientHeight; renderer = new three.webglrenderer ({// bind kanvas ke renderer canvas: document.geteLementById ('tiga_canvas')}); renderer.setsize (lebar, tinggi); // Atur ukuran rendering yang sama dengan kanvas renderer.setClearcolor (0xffffff, 1.0); // Atur warna dan transparansi default}Skenario Inisialisasi:
fungsi initscene () {scene = new three.scene ();}Inisialisasi kamera:
function initcamera () {// Kamera proyeksi ortogonal sederhana, menghadap ke tengah viewport, ukuran viewport sama dengan ukuran kanvas. kamera = tiga.othographycamera baru (lebar / -2, lebar / 2, tinggi / 2, tinggi / -2, 1, 1000); // Atur kamera posisi kamera.position.x = 0; kamera.position.y = 0; kamera.position.z = 200; // atur kamera arah ke atas kamera.up.x = 0; kamera.up.y = 1; kamera.up.z = 0; // Atur posisi fokus kamera (sebenarnya untuk menentukan arah) kamera.lookat ({x: 0, y: 0, z: 0});}Untuk secara unik menentukan posisi dan arah kamera, tiga atribut posisi, atas, dan lookat sangat diperlukan.
Di sini kami telah membuat kamera proyeksi ortogonal. Di sini saya menjaga ukuran tampilan konsisten dengan resolusi layar hanya untuk kenyamanan, sehingga panjang satuan dalam sistem koordinat sesuai dengan piksel layar.
Kami menempatkan kamera pada sumbu Z, menghadap asal koordinat, dan arah atas kamera adalah sumbu Y. Perhatikan bahwa arah atas dan arah Lookat harus tegak lurus (Anda akan tahu jika Anda membandingkan diri Anda dengan kepala Anda sendiri).
Berikut adalah kubus yang ditambahkan ke tempat kejadian:
function initObject () {// Buat kubus dengan panjang sisi 100 var geometry = baru tiga.cubeGeometry (100, 100, 100); Object = New Three.Mesh (Geometry, New Three.MeshnormalMaterial ()); scene.add (objek);}Perhatikan bahwa kami menggunakan material normal meshnormalmaterial , sehingga warna setiap wajah kubus terkait dengan arah yang menghadap ke wajah ini, membuatnya lebih mudah untuk mengamati/men -debug.
Dalam demo sederhana ini, saya tidak berencana untuk menambahkan efek cahaya dan bayangan, dan bahan normal tidak merespons cahaya.
Akhirnya, buat loop animasi
function render () {requestanimationframe (render); objek.rotation.x += 0,05; objek.rotation.y += 0,05; renderer.render (adegan, kamera);}Setiap pengecatan ulang membuat kubus sedikit berputar.
Saat halaman dimuat, cukup hubungi fungsi sebelumnya
function threeStart () {initrenderer (); initcamera (); initscene (); initObject (); render ();} window.onload = threeStart ();Demo lengkap terlihat seperti ini:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> cube </iteme> <script src = "http://sqimg.qq.com/qq_min.min.min_operations/mma/javanli_test/lib/qq_min.min.min.mma html, tubuh {margin: 0; Padding: 0; } #three_canvas {position: absolute; Lebar: 100%; Tinggi: 100%; } </tyle> </head> <body> <canvas id = "tiga_canvas"> </canvas> <script> var renderer, kamera, adegan, cahaya, objek; var lebar, tinggi; fungsi initrenderer () {width = document.geteLementById ('tiga_canvas'). clientWidth; tinggi = document.getElementById ('tiga_canvas'). ClientHeight; renderer = new three.webglrenderer ({canvas: document.geteLementById ('tiga_canvas')}); renderer.setsize (lebar, tinggi); renderer.setClearColor (0xfffff, 1.0); } function initCamera () {kamera = baru tiga.othographycamera (lebar / -2, lebar / 2, tinggi / 2, tinggi / -2, 1, 1000); camera.position.x = 0; kamera.position.y = 0; kamera.position.z = 200; camera.up.x = 0; kamera.up.y = 1; kamera.up.z = 0; kamera.lookat ({x: 0, y: 0, z: 0}); } function initscene () {scene = new three.scene (); } function initObject () {var geometry = new three.cubeGeometry (100, 100, 100); Object = New Three.Mesh (Geometry, New Three.MeshnormalMaterial ()); scene.add (objek); } function render () {requestanimationframe (render); objek.rotation.x += 0,05; objek.rotation.y += 0,05; renderer.render (adegan, kamera); } function threeStart () {initrenderer (); initcamera (); initscene (); initObject (); memberikan(); } window.onload = threeStArt (); </cript> </body> </html>Setelah menyimpan sebagai HTML, buka, kubus yang berputar seperti itu akan ditampilkan di tengah layar.
ringkasan
Itu saja untuk pengenalan tiga.js. Artikel ini pada dasarnya menyebutkan komponen penting dalam tiga. Bahkan, ada banyak hal yang ingin saya ringkas, tetapi menulisnya dalam artikel ini mungkin tampak rumit. Tujuan asli dari artikel ini adalah untuk memungkinkan pembaca memiliki pemahaman yang intuitif dan umum tentang tiga.js setelah membacanya, dan tidak bermaksud melibatkan terlalu banyak detail.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.