Komentar: Kami telah melihat betapa lelahnya menggunakan API WebGL asli untuk dikembangkan, karena sejumlah besar kerangka kerja WebGL telah dikembangkan. Kerangka kerja ini merangkum berbagai elemen dalam menciptakan adegan 3D ke berbagai tingkat. Anda dapat dengan cepat membuat adegan 3D yang diperlukan. Teman yang tertarik dapat mempelajarinya. Mungkin artikel ini akan membantu Anda.
Kami telah melihat betapa lelahnya menggunakan pengembangan API WebGL asli. Karena itu, sejumlah besar kerangka kerja WebGL telah dikembangkan. Dengan kerangka kerja ini, Anda dapat dengan cepat membuat adegan 3D yang diperlukan. Kerangka kerja ini merangkum berbagai elemen dalam menciptakan adegan 3D ke berbagai tingkat, seperti adegan, kamera, model, pencahayaan, bahan, dll.; Dengan menggunakan objek yang dienkapsulasi ini, Anda dapat dengan mudah membuat adegan 3D yang diperlukan, sehingga Anda hanya perlu memfokuskan lebih banyak energi pada logika.
Saat ini, tidak ada yang memiliki keuntungan dari kerangka kerja lainnya yang luar biasa. Jenis bingkai apa yang harus dipilih tergantung pada preferensi pribadi Anda. Namun, ketika memilih kerangka kerja, saya pribadi berpikir lebih baik untuk melihat waktu pembaruan terakhir dari kerangka kerja. Memilih kerangka kerja yang diperbarui yang stabil selalu dapat menggunakan fitur terbaru dan membuat program Anda lebih stabil.
Contoh berikut menggunakan kerangka tiga.js untuk pengembangan.
Three.js adalah kerangka kerja open source yang relatif komprehensif, yang dikemas dengan baik dengan berbagai elemen adegan 3D. Anda dapat menggunakannya untuk dengan mudah membuat kamera, model, pencahayaan, bahan, dan banyak lagi. Anda juga dapat memilih renderer yang berbeda. Three.js menyediakan berbagai metode rendering. Anda dapat memilih untuk menggunakan kanvas untuk diterjemahkan, atau menggunakan WebGL atau SVG untuk diterjemahkan.
Selain itu, Three.js dapat memuat file 3D dalam banyak format, dan file model Anda dapat berasal dari Blender, Maya, Chinema4D, 3Dmax, dll. Dan memiliki hal -hal yang relatif dasar dibangun di: (bola) bidang (pesawat terbang), (kubus) kubus, (silinder). Three.js membuat objek ini dengan sangat mudah.
Oke, jangan bicara omong kosong, lihat saja kodenya:
<! Doctype html>
<Html>
<head>
<title> ThreeJsDemo </title>
<meta charset = "UTF-8">
<tyle>
Tubuh
{
margin: 0px;
Latar Belakang-Color:#B0B0B0;
Kelebihan: Tersembunyi;
}
</tyle>
</head>
<body>
<skrip src = "tiga.js"> </script>
<script>
Var Camera, Scene, Renderer;
var mesh;
init ();
menghidupkan();
fungsi init () {
adegan = baru tiga.scene ();
kamera = baru tiga.perspectiveCamera (70, window.innerwidth /window.innerheight,1,1000);
kamera.position.z = 400;
scene.add (kamera);
geometri = tiga.cubegeometry baru (200.200.200);
material = new Three.MeshBasicMaterial ({Color: 0xff0000, Wireframe: true});
mesh = baru tiga.mesh (geometri, materi);
scene.add (mesh);
renderer = new three.webglrenderer ();
renderer.setsize (window.innerwidth, window.innerheight);
Document.Body.AppendChild (Renderer.DomElement);
}
fungsi animate () {
requestanimationframe (animate);
mesh.rotation.x += 0,05;
mesh.rotation.y += 0,05;
renderer.render (adegan, kamera);
}
</script>
</body>
</html>
Ini semua kode, dibandingkan dengan kode sebelumnya menggunakan WebGL API, ini terlalu sederhana.
Kode ini sangat intuitif, hanya beberapa langkah:
1. Buat adegan adegan.
2. Buat kamera kamera.
3. Buat/memuat geometri model.
4. Muat bahan material.
5. Render model objek mesh (terdiri dari geometri dan material).
6. Aktifkan animasi.
Ini adalah fitur yang disediakan oleh setiap kerangka kerja. Menggunakan kerangka kerja yang berbeda pada dasarnya sama kecuali bahwa nama fungsi mungkin berbeda. Referensi berikut mencantumkan banyak dokumen pembelajaran kerangka kerja, Anda dapat memilih beberapa cara untuk belajar.
Mengenai data model, saya ingin mengatakan satu hal, karena JSON pendek dan ringkas, itu lebih cocok untuk transmisi jaringan. Di masa depan, ini mungkin menjadi format data model yang paling cocok untuk WebGL, begitu banyak kerangka kerja telah mulai mendukung data model dalam format JSON.
Referensi Praktis:
Pusat Pengembangan: https://developer.mozilla.org/en/webgl
Alat Pengembangan Online Premium:
Tutorial dasar untuk berbagai kerangka kerja:
Tutorial Cina Webgl :? P = 42
Tutorial Cina Oak3D :? Cat = 57
Situs Resmi CubicVR3D:
Perpustakaan Grafis Three.js: https://github.com/mrdoob/three.js
Posting Koleksi untuk berbagai bingkai: