Geekly articles weekly

Artikel Peninjauan A-Frame



A-Frame adalah kerangka kerja web yang memungkinkan Anda membuat berbagai aplikasi, game, adegan dalam realitas virtual (VR). Semua hal di atas akan tersedia langsung dari browser helm VR Anda. Alat ini akan berguna bagi mereka yang ingin mengembangkan game VR di browser, dan misalnya, dapat berguna sebagai platform untuk membuat aplikasi, situs, halaman arahan VR web. Penggunaan BP Web hanya dibatasi oleh imajinasi Anda. Dengan begitu saja saya dapat membawa beberapa bidang aktivitas manusia di mana BP dapat bermanfaat: pendidikan, kedokteran, olahraga, penjualan, rekreasi.

Apa yang ada di dalam?


A-Frame tidak ditulis dari 0 di WebGL murni, ini didasarkan pada pustaka Three.js . Oleh karena itu, saya sarankan Anda untuk terlebih dahulu memahami konsep dasar Three.js sebelum Anda mulai bekerja dengan A-Frame, meskipun ini tidak perlu, karena A-Frame dirancang sehingga Anda paling tidak berpikir tentang rendering geometri dan lebih fokus pada logika aplikasi Anda. . Itu sebabnya dia, pada kenyataannya, dan kerangka kerja.

Untuk ini, A-Frame mendalilkan tiga poin utama, yang akan kita bicarakan nanti.

A-Frame bekerja dengan HTML


Banyak elemen A-Frame dasar, seperti adegan, kamera, kotak, bola, dll., Ditambahkan ke adegan melalui tag dengan nama yang sama dengan awalan a- . Setiap item serupa didaftarkan sebagai kustom. A-Frame (0.8.0) saat ini menggunakan spesifikasi v0.

<a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> </a-scene>

Sepotong kecil kode ini akan menggambar adegan WebGL yang akan ditambahkan dua objek: kubus dan bola dengan parameter yang diberikan. Selain dua elemen yang disebutkan di atas, ada sejumlah primitif lain yang dapat ditambahkan ke adegan dengan cara yang sama: <circle>, <a-cone>, <a-cylinder>, <a-dodecahedron>, <a-icosahedron> , <a-octahedron>, <a-plane>, <a-ring>, <a-tetrahedron>, <a-torus-knot>, <a-torus>, <a-triangle> . Juga di A-Frame ada sejumlah elemen lain yang melakukan fungsi tertentu:

  • <a-camera> - membuat kamera. Hanya kamera perspektif (PerspectiveCamera) yang saat ini didukung.
  • <a-obj-model>, <a-collada-model>, <a-gltf-model> - mereka semua memuat dan menampilkan model format yang sesuai.
  • <a-cursor> - elemen yang memungkinkan Anda melakukan berbagai tindakan: klik, panduan, dll. Kursor diikat ke bagian tengah kamera, sehingga akan selalu berada di tengah apa yang dilihat pengguna.
  • <a-image> - menampilkan gambar yang dipilih di pesawat (<a-plane>).
  • <a-link> sama dengan tag, hanya untuk adegan 3D.
  • <a-sky> - silinder besar di sekitar panggung yang memungkinkan Anda menampilkan 360 foto. Atau Anda bisa mengisinya dengan beberapa warna.
  • <a-sound> - menciptakan sumber suara di posisi tertentu.
  • <a-text> - menggambar teks datar.
  • <a-video> - memutar video di pesawat.

Saya juga ingin mencatat bahwa kami bekerja dengan elemen DOM, dan oleh karena itu kami dapat menggunakan API DOM standar, termasuk kueriSelektor, getElementById, appendChild, dll.

A-Frame menggunakan ECS



ECS (Entity Component System) - pola desain aplikasi dan game. Itu tersebar luas hanya di segmen kedua. Sesuai namanya, tiga konsep dasar suatu pola adalah Entity, Component, System. Dalam bentuk klasik, mereka saling berhubungan sebagai berikut: kami memiliki beberapa objek penampung (Entity) yang dapat kami tambahkan komponen. Biasanya, komponen bertanggung jawab atas bagian yang terpisah dari logika. Misalnya, kami memiliki objek Player, ia memiliki komponen Kesehatan. Komponen ini akan berisi semua logika yang terkait dengan pengisian atau kehilangan kesehatan pemain (objek). Dan sistem, pada gilirannya, diperlukan untuk mengelola seperangkat entitas yang dikombinasikan oleh beberapa komponen. Biasanya, komponen dapat mendaftarkan entitas dalam sistem dengan nama yang sama.

Dalam A-Frame, pola ini diimplementasikan dengan sangat sederhana dan elegan - dengan bantuan atribut. Setiap elemen A-Frame - <a-scene>, <a-box>, <a-sphere>, dll digunakan sebagai entitas.Tapi , tentu saja, elemen <a-entity> berdiri terpisah. Namanya berbicara untuk dirinya sendiri. Semua elemen lainnya pada dasarnya adalah pembungkus untuk komponen dan dibuat untuk kenyamanan, karena setiap elemen juga dapat dibuat menggunakan <a-entity> . Misalnya <a- kotak> :

 <a-entity geometry="primitive: box; width: 1; height: 1; depth: 1"></a-entity>

geometri - dalam hal ini, adalah komponen yang ditambahkan ke entitas <a-entity> . <a-entity> itu sendiri tidak memiliki logika (dalam arti global), dan komponen geometri pada dasarnya mengubahnya menjadi kubus atau sesuatu yang lain. Komponen lain yang tak kalah penting dari geometri adalah material . Itu menambah material pada geometri. Bahan tersebut bertanggung jawab untuk apakah kubus kami akan bersinar seperti logam, apakah akan memiliki tekstur, dll. Dalam murni Three.js, kita harus membuat geometri yang terpisah, bahan yang terpisah, dan kemudian semua ini perlu digabungkan dalam cache. Secara umum, pendekatan ini menghemat waktu.

Setiap komponen dalam A-Frame harus didaftarkan secara global melalui desain khusus:

 AFRAME.registerComponent('hello-world', { init: function () { console.log('Hello, World!'); } });

Kemudian komponen ini dapat ditambahkan ke adegan, atau elemen lainnya.

 <a-entity hello-world></a-entity>

Karena kami menambahkan panggilan balik init untuk komponen kami, segera setelah elemen ditambahkan ke DOM, panggilan balik ini akan berfungsi dan kami akan melihat pesan kami di konsol. Ada panggilan balik siklus hidup lainnya dalam komponen A-Frame. Mari kita bahas lebih rinci:

  • pembaruan - disebut selama inisialisasi sebagai init, dan saat memperbarui properti apa pun dari komponen ini.
  • hapus - dipanggil setelah menghapus komponen atau entitas yang mengandungnya. Artinya, jika Anda menghapus <a-entity> dari DOM, semua komponennya akan memanggil remove callback.
  • centang - panggil setiap kali sebelum menampilkan adegan. Di dalam render loop menggunakan requestAnimaitonFrame
  • tok - dipanggil setiap kali setelah menampilkan adegan.
  • play - masing-masing dipanggil saat adegan dilanjutkan rendering. Pada dasarnya setelah scene.play ();
  • jeda - Dipanggil setiap kali adegan dihentikan render. Intinya setelah scene.pause ();
  • updateSchema - dipanggil setiap kali setelah memperbarui skema.

Konsep komponen penting lainnya dalam A-Frame adalah sirkuit. Diagram menggambarkan sifat-sifat komponen. Ini didefinisikan sebagai berikut:

 AFRAME.registerComponent('my-component', { schema: { arrayProperty: {type: 'array', default: []}, integerProperty: {type: 'int', default: 5} } }

Dalam hal ini, komponen saya akan berisi dua properti, arrayProperty dan integerProperty . Untuk meneruskannya ke komponen, Anda perlu mengatur nilai atribut yang sesuai.

 <a-entity my-component="arrayProperty: 1,2,3; integerProperty: 7"></a-entity>

Anda bisa mendapatkan properti ini di dalam komponen melalui properti data .

 AFRAME.registerComponent('my-component', { schema: { arrayProperty: {type: 'array', default: []}, integerProperty: {type: 'int', default: 5} }, init: function () { console.log(this.data); } }

Untuk mendapatkan properti komponen dari entitas yang ditambahkan, Anda dapat menggunakan fungsi getAttribute yang sedikit dimodifikasi. Saat mengakses entitas A-Frame, itu akan mengembalikan tidak hanya nilai string atribut, tetapi objek data yang disebutkan di atas.

  console.log(this.el.getAttribute('my-component')); // {arrayProperty: [1,2,3], integerProperty: 7}

Dengan cara yang kira-kira sama, Anda dapat mengubah properti komponen:

 this.el.setAttribute('my-component',{arrayProperty: [], integerProperty: 5})

Sekarang mari kita bicara tentang sistem. Sistem dalam A-Frame terdaftar dengan cara yang sama seperti komponen:

 AFRAME.registerSystem('my-system', { schema: {}, init: function () { console.log('Hello, System!'); }, });

Seperti halnya komponen, sistem memiliki sirkuit dan panggilan balik. Hanya sistem yang hanya memiliki 5 di antaranya: init, play, pause, tick, tock . Sistem tidak perlu ditambahkan sebagai komponen ke entitas. Secara otomatis akan ditambahkan ke tempat kejadian.

 this.el.sceneEl.systems['my-system'];

Jika komponen memiliki nama yang sama dengan sistem, sistem akan tersedia di sistem ini .

 AFRAME.registerSystem('enemy', { schema: {}, init: function () {}, }); AFRAME.registerComponent('enemy', { schema: {}, init: function () { const enemySystem = this.system; }, });

Biasanya, sistem diperlukan untuk merakit dan mengelola entitas dengan komponen terkait. Di sini, secara teori, harus ada logika yang berhubungan dengan kumpulan entitas. Misalnya, kendalikan penampilan musuh dalam game.

Komunikasi dalam A-Frame terjadi melalui sarana acara browser


Memang, mengapa menciptakan kembali roda, jika saat ini ada implementasi publisher-subscriber yang bagus untuk elemen DOM. Acara DOM memungkinkan Anda untuk mendengarkan kedua acara browser, seperti penekanan tombol, klik mouse, dan acara pengguna lainnya. A-Frame menawarkan kepada kita cara yang nyaman dan mudah untuk berkomunikasi antara entitas, komponen dan sistem, melalui acara pengguna. Untuk ini, setiap elemen A-Frame ditambal oleh fungsi emit , dibutuhkan tiga parameter: yang pertama adalah nama acara, yang kedua adalah data yang akan ditransmisikan, yang ketiga adalah apakah acara tersebut akan muncul.

 this.el.emit('start-game', {level: 1}, false);

Anda dapat berlangganan ke acara ini dengan cara yang biasa bagi kita semua, menggunakan addEventListener:

 const someEntity = document.getElementById('someEntity'); someEntity.addEventListener('start-game', () => {...});

Gelembungnya peristiwa di sini adalah poin yang sangat penting, karena kadang-kadang dua entitas yang harus berkomunikasi satu sama lain berada pada level yang sama, dalam hal ini Anda dapat menambahkan pendengar acara ke elemen adegan. Itu, seperti yang Anda lihat sebelumnya, tersedia di dalam setiap elemen melalui tautan sceneEl .

 this.el.sceneEl.addEventListener('start-game', () => {...});

Kesimpulannya


Mungkin itulah yang ingin saya bicarakan di artikel ini. A-Frame memiliki banyak topik berbeda yang dapat dibahas, tetapi artikel ini adalah ulasan dan saya ingin memfokuskan pembaca hanya pada poin utama. Pada artikel selanjutnya, kami akan mencoba membuat adegan dasar untuk menguji semua pengetahuan yang diperoleh dalam praktik. Terima kasih semuanya!

Source: https://habr.com/ru/post/id439416/

More articles:


All Articles