Saat menggunakan pustaka ThreeJS untuk tampilan di browser, contoh pertama biasanya kubus atau objek dasar lainnya, dan itu dibuat menggunakan kelas BoxGeometry atau SphereGeometry khusus yang telah ditentukan sebelumnya. Kemudian, penggunaan model yang sudah jadi impor dan pekerjaan dengan mereka biasanya dipertimbangkan.
Tetapi kadang-kadang Anda perlu membuat objek tiga dimensi untuk ditampilkan di browser sepenuhnya dari awal - hanya menggunakan geometri analitik. Artikel ini membahas pendekatan untuk membangun model yang dapat disesuaikan secara interaktif dan tampilan selanjutnya di browser.
Jika dalam hal menggunakan OpenGL dan C / C ++ untuk menampilkan objek di luar browser, ada pustaka siap pakai dari fungsi yang sesuai, maka menemukan pustaka yang sesuai dalam JavaScript cukup sulit. Perpustakaan yang ada, seperti glMatrix , terutama ditujukan untuk transformasi geometrik - rotasi, pergerakan, penskalaan model. Untuk membangun objek tiga dimensi dari awal menggunakan metode geometri analitik, diperlukan fungsi yang sama sekali berbeda yang dapat melakukan, misalnya, tindakan berikut - menemukan titik persimpangan garis pada pesawat, menemukan titik persimpangan dua lingkaran pada pesawat, membuat pesawat dari vektor normal dan titik, menemukan titik persimpangan tiga pesawat dan sejenisnya. Untuk tujuan ini, perpustakaan WebGeometry kecil telah dibuat.
Setahun setengah yang lalu, saya menerbitkan artikel pendek tentang dia. Dapat ditemukan
pada tautan .
Sekitar enam bulan yang lalu, saya memutuskan untuk kembali ke topik ini dan mengatakan sedetail mungkin dengan banyak contoh tentang membuat model dari awal menggunakan WebGeometry . Pada awalnya saya berasumsi bahwa saya akan mengelola sekitar tiga artikel, tetapi dalam prosesnya saya memutuskan untuk berhenti menulis artikel dan membuat situs web. Hasilnya adalah situs web yang terdiri dari tiga puluh pelajaran (saya menyebutnya bab):
Three.js dan geometri
Semua model tiga dimensi yang ditampilkan menggunakan ThreeJS dibuat seinteraktif mungkin dan dimasukkan langsung ke dalam teks situs. Jika Anda membaca tentang bagaimana model ini atau itu dibuat, maka Anda dapat melihat nomor titik, yang disebutkan dalam teks, nama wajah model, sudut kemiringan wajah, dan bahkan koordinat titik mana pun dari model yang bersangkutan tanpa meninggalkan situs langsung pada model teks di situs.
Dua bab pertama yang disajikan di situs membahas beberapa aspek menggunakan perpustakaan ThreeJS sebagaimana diterapkan untuk model masa depan. Diasumsikan bahwa pembaca sudah terbiasa dengan cara membuat program sederhana berbasis ThreeJS .
Dua bab berikutnya menjelaskan bekerja dengan fungsi dua dimensi dari pustaka WebGeometry . Banyak contoh yang relevan diberikan. Semua contoh bersifat interaktif dan menampilkan hasil karya mereka ditampilkan menggunakan HTML5 Canvas . Mungkin menarik untuk melihat gambar interaktif dalam bab 14, 18, 20, 23, dan 28.
Dimulai dengan bab kelima, Anda dapat melihat penerapan fungsi pustaka WebGeometry untuk pembangunan model tiga dimensi yang kompleks. Polyhedra dipilih sebagai model, dan lebih tepatnya, segi batu berharga. Menurut pendapat saya, tidak ada objek lain di mana dimungkinkan untuk lebih menunjukkan aplikasi fungsi yang menerapkan metode geometri analitik. Pernyataan ini dapat dibuat karena beberapa alasan.
- Semua polyhedra semacam itu dikembangkan dengan sangat ketat sesuai dengan hukum matematika.
- Polihedra ini tidak memiliki struktur yang benar-benar teratur, seperti padatan Platonis (kubus, tetrahedron, ...), walaupun memiliki simetri dan cukup indah.
- Karena polyhedra ini tidak memiliki struktur reguler, maka perlu menggunakan berbagai macam perhitungan geometrik untuk menentukan koordinat verteks mereka, daripada membatasi diri pada tugas berat dalam program koordinat simpul model yang diambil dari berbagai sumber.
- Anda tidak perlu mengetahui informasi awal tentang pemotongan. Hanya perlu diingat bahwa bagian atas polyhedron seperti itu disebut mahkota, bagian tengah - korset, dan bagian bawah - paviliun. Wajah paling atas disebut platform, dan puncak terendah adalah calet.
Semua polyhedron (dan gambar) di situs dapat diubah dengan mengatur parameter model. Hanya satu poin yang harus dibuat. Diasumsikan bahwa hampir semua model (dengan beberapa pengecualian) harus tetap cembung dengan perubahan nilai parameter. Oleh karena itu, beberapa polyhedra mengubah bentuknya ke tingkat yang kecil. Untuk verifikasi konveksitas, fungsi khusus bertanggung jawab. Jika Anda membatalkan pemeriksaan ini, Anda bisa mendapatkan bentuk objek yang sama sekali tidak terduga (sulit untuk menamainya polyhedra). Beberapa bentuk ini mungkin menarik, mungkin, bagi seniman lukisan fiksi ilmiah (lihat tangkapan layar di akhir bab 10 dan 13).
Sebagian besar fungsi perpustakaan WebGeometry dibuat menggunakan transformasi matriks. Tetapi untuk membangun model, pengetahuan tentang matriks kemungkinan besar tidak diperlukan, karena matriks tersembunyi di dalam fungsi lain yang digunakan. Misalnya, fungsi yang mendefinisikan titik persimpangan tiga bidang.
Saya akan membuat satu komentar, yang pada pandangan pertama tampak sepenuhnya berlebihan dan terlalu sepele, tetapi mungkin itu akan berguna bagi seseorang di masa depan. Itu terletak pada kenyataan bahwa melalui tiga titik yang tidak terletak pada garis yang sama, Anda hanya dapat menggambar satu bidang. Misalkan wajah polyhedron adalah segi empat. Persamaan bidang di mana wajah ini terletak ditentukan oleh tiga titik. Koordinat dari titik keempat dari segi empat ini tidak termasuk dalam persamaan ini, tetapi titik keempat yang sama milik sisi lain dari polyhedron, yang juga dihitung. Terkadang sulit untuk memperhatikan bahwa segi empat dari bidang pertama (atau kedua) rusak karena fakta bahwa secara visual tampaknya bahwa titik keempat ini milik dua pesawat sekaligus, tetapi pada kenyataannya tidak demikian. Kesalahan ini sulit untuk diketahui ketika mempertimbangkan model yang sudah dibangun. Dia tiba-tiba merangkak keluar setelah waktu yang lama dan benar-benar tak terduga. Saya menemukan ini beberapa kali.
Terima kasih atas perhatian Anda! Selain melihat situs, Anda dapat mengunjungi
repositori saya .