Gambaran keseluruhan WebGL 3D dalam HTML5 (Bahagian 2)—Pengenalan kepada pembangunan perpustakaan kelas dan kemahiran tutorial framework_html5

Kami melihat sebelum ini betapa penatnya membangunkan menggunakan API WebGL asli Oleh sebab itu, sejumlah besar rangka kerja WebGL telah dibangunkan. Menggunakan rangka kerja ini, anda boleh mencipta adegan 3D dengan cepat yang anda perlukan. Rangka kerja ini merangkumi pelbagai elemen untuk mencipta pemandangan 3D pada tahap yang berbeza-beza, seperti adegan, kamera, model, pencahayaan, bahan, dan lain-lain. lebih kepada logik.

Pada masa ini, tiada kelebihan yang boleh mengatasi rangka kerja yang lain untuk dipilih bergantung pada keutamaan peribadi Namun, apabila memilih rangka kerja, saya secara peribadi berpendapat adalah lebih baik untuk melihat masa kemas kini terakhir rangka kerja dan pilih Rangka kerja yang stabil dan dikemas kini membolehkan anda sentiasa menggunakan ciri terkini, menjadikan program anda lebih stabil.

Contoh berikut dibangunkan menggunakan rangka kerja Three.js.
Three.js ialah rangka kerja sumber terbuka yang agak komprehensif yang merangkumi pelbagai elemen adegan 3D dengan baik. Anda boleh menggunakannya untuk membuat kamera, model, lampu, bahan dan banyak lagi dengan mudah. Anda juga boleh memilih pemaparan yang berbeza Three.js menyediakan pelbagai kaedah pemaparan Anda boleh memilih untuk menggunakan kanvas untuk pemaparan, atau anda boleh menggunakan WebGL atau SVG untuk pemaparan.

Selain itu, Three.js boleh memuatkan fail 3D dalam banyak format fail model anda boleh datang daripada Blender, Maya, Chinema4D, 3DMax, dsb. Dan ia mempunyai perkara yang agak asas terbina dalam: (sfera) Sfera, (satah) Satah, (kubus) Kiub, (silinder) Silinder. Three.js menjadikannya sangat mudah untuk mencipta objek ini.

Baiklah, tiada lagi perkara karut, lihat sahaja kod:

Salin kod

Kod tersebut adalah seperti berikut :

set < ="utf-8 ">