Rumah >hujung hadapan web >tutorial js >Membina permainan dengan Three.js, React dan WebGL
mata teras
Sila lihat panduan WebGL Gets Start dan JSX Getsing Guide di SitePoint untuk pengenalan kepada React dan WebGL. Artikel ini dan kod yang disertakan menggunakan sintaks ES6.
sebentar tadi, Pete Hunt membuat lelucon di saluran #ReactJS IRC, mengatakan bahawa dia akan menggunakan React untuk membuat permainan:
Saya yakin kita boleh membuat penembak orang pertama dengan React! Musuh mempunyai
dll. Saya tersenyum. Dia juga ketawa. Semua orang bersenang -senang. "Siapa di dunia yang akan melakukan ini?"
Chameleon Charm adalah permainan yang mengumpul prop yang dipertingkatkan yang akan membolehkan anda menyempitkan untuk menyelesaikan maze fraktal tak terhingga. Saya telah bekerja sebagai pemaju React selama beberapa tahun dan saya ingin tahu jika ada cara untuk menggunakan React untuk memandu tiga.js. Pada masa ini, R3R menarik perhatian saya.
Mengapa pilih React?
Saya tahu apa yang anda fikirkan: Mengapa? Tolong beritahu saya. Berikut adalah beberapa sebab untuk mempertimbangkan menggunakan React to Drive Adegan 3D:
<player></player>
, <wall></wall>
, <level></level>
, dan banyak lagi. <texture require="" src="%7B"></texture>
React dan WebGL
Saya mencipta repositori GitHub sampel untuk bekerja dengan artikel ini. Klon repositori dan jalankan kod seperti dalam ReadMe dan terus belajar. Ia mempunyai Robot SitePointy 3D sebagai watak utama!
Amaran: R3R masih dalam fasa ujian. APInya tidak stabil dan mungkin berubah pada masa akan datang. Pada masa ini ia hanya memproses subset tiga.js. Saya dapati ia cukup lengkap untuk membina permainan lengkap, tetapi hasil anda mungkin berbeza -beza.
Kod Lihat Organisasi
Manfaat utama menggunakan React to Drive WebGL adalah bahawa kod pandangan kami dihancurkan dari logik permainan. Ini bermakna entiti yang kami berikan adalah kecil dan mudah difahami komponen.
Sekarang kita mempunyai adegan 3D yang kosong dengan kamera. Menambah mesh ke tempat kejadian semudah termasuk komponen
dan memberikannya<code><scene>></scene> <perspectivecamera> position={ new THREE.Vector3( 1, 1, 1 ) /> > </perspectivecamera></code>semudah
. <mesh></mesh>
<geometry></geometry>
<material></material>
Di sebalik tabir, ini akan mencipta tiga.scene dan secara automatik menambah grid dengan tiga.boxgeometry. R3R mengendalikan perbezaan antara adegan lama dan sebarang perubahan. Jika anda menambah mesh baru ke tempat kejadian, mesh asal tidak akan dicipta semula. Sama seperti menggunakan React dan DOM biasa, adegan 3D hanya mengemas kini perbezaan.
<code><scene>></scene> … <mesh>></mesh> <boxgeometry></boxgeometry> width={ 1 } height={ 1 } depth={ 1 } /> <meshbasicmaterial></meshbasicmaterial> color={ 0x00ff00 } /> > </code>Kerana kita bekerja di React, kita boleh melepaskan entiti permainan ke dalam fail komponen. Fail Robot.js dalam repositori sampel menunjukkan bagaimana untuk mewakili peranan utama menggunakan kod pandangan React Pure. Ia adalah komponen "fungsi tanpa statur", yang bermaksud ia tidak menyelamatkan mana -mana keadaan tempatan:
Sekarang kita akan memasukkan
dalam adegan 3D kami!<code>const Robot = ({ position, rotation }) => <group></group> position={ position } rotation={ rotation } > <mesh> rotation={ localRotation }></mesh> <geometryresource></geometryresource> resourceId="robotGeometry" /> <materialresource></materialresource> resourceId="robotTexture" /> > >; </code>
<robot></robot>
Anda boleh melihat lebih banyak contoh API pada repositori R3R GitHub, atau melihat tetapan sampel penuh dalam projek yang disertakan.
<code><scene>></scene> … <mesh>></mesh>…> <robot></robot> position={…} rotation={…} /> > </code>menganjurkan logik permainan
Separuh lagi persamaan adalah untuk menangani logik permainan. Mari tambahkan beberapa animasi mudah ke Robot SitePointy kami.
bagaimana gelung permainan tradisional berfungsi? Mereka menerima input pengguna, menganalisis "Negeri Dunia" lama, dan kembali ke Negeri Dunia Baru untuk diberikan. Untuk kemudahan, mari kita simpan objek "Permainan Negeri" dalam keadaan komponen. Dalam projek yang lebih matang, anda boleh memindahkan keadaan permainan ke redux atau penyimpanan fluks.
kami akan menggunakan panggilan balik API penyemak imbas untuk memandu gelung permainan kami dan menjalankan gelung di requestAnimationFrame
. Untuk animasi robot, mari kita hitung lokasi baru berdasarkan timestamp yang diluluskan kepada GameContainer.js
dan kemudian simpan lokasi baru di negeri ini. requestAnimationFrame
<code><scene>></scene> <perspectivecamera> position={ new THREE.Vector3( 1, 1, 1 ) /> > </perspectivecamera></code>Calling
akan mencetuskan semula komponen kanak-kanak dan mengemas kini adegan 3D. Kami lulus keadaan dari komponen kontena ke komponen demo: setState()
<game></game>
<code><scene>></scene> … <mesh>></mesh> <boxgeometry></boxgeometry> width={ 1 } height={ 1 } depth={ 1 } /> <meshbasicmaterial></meshbasicmaterial> color={ 0x00ff00 } /> > </code>
Sekarang kita boleh menulis gelung permainan ringkas dan jelas yang mengandungi hanya panggilan fungsi:
Untuk menambah lebih banyak logik ke gelung permainan, seperti pengendalian fizik, buat fungsi reducer lain dan lulus kepada hasil pengurangan sebelumnya:
<code>const Robot = ({ position, rotation }) => <group></group> position={ position } rotation={ rotation } > <mesh> rotation={ localRotation }></mesh> <geometryresource></geometryresource> resourceId="robotGeometry" /> <materialresource></materialresource> resourceId="robotTexture" /> > >; </code>
Sebagai pertumbuhan enjin permainan, ia menjadi penting untuk mengatur logik permainan ke dalam fungsi berasingan. Menggunakan mod reducer, organisasi ini sangat mudah.
<code><scene>></scene> … <mesh>></mesh>…> <robot></robot> position={…} rotation={…} /> > </code>
Pengurusan Sumber
Dengan tetapan ini, jika anda menukar imej pada cakera, adegan 3D anda akan dikemas kini dalam masa nyata! Ini tidak ternilai untuk reka bentuk permainan dan kandungan yang cepat.
<code>// … gameLoop( time ) { this.setState({ robotPosition: new THREE.Vector3( Math.sin( time * 0.01 ), 0, 0 ) }); } </code>
Untuk sumber-sumber lain (seperti model 3D), anda masih perlu menggunakan pemuat terbina tiga.js (seperti jsonloader) untuk mengendalikannya. Saya telah cuba menggunakan Loader Webpack Custom untuk memuatkan fail model 3D, tetapi berakhir dengan terlalu banyak kerja dan tidak ada manfaat. Lebih mudah untuk memikirkan model sebagai data binari dan gunakan loader fail untuk memuatkannya. Ini masih boleh melaksanakan data model masa nyata. Anda boleh melihat ini dalam kod sampel.
Debug
R3R menyokong sambungan alat pemaju React untuk Chrome dan Firefox. Anda boleh menyemak adegan anda seperti anda akan memeriksa DOM biasa! Melayang di atas unsur -unsur di Inspektor memaparkan kotak terikat mereka di tempat kejadian. Anda juga boleh melayang ke atas definisi tekstur untuk melihat objek mana di tempat kejadian menggunakan tekstur ini.
Anda juga boleh menyertai ruang sembang Gitter React-Three-Renderer untuk mendapatkan bantuan dalam menyahpepijat permohonan.
Langkah berjaga -jaga prestasi
Apabila membina daya tarikan bunglon, saya menghadapi beberapa isu prestasi yang unik untuk aliran kerja ini.
setState()
berbilang kali setiap bingkai akan menghasilkan rendering dua kali dan merendahkan prestasi. setState()
itu sahaja!
Lihat Chameleon Charm untuk mengetahui apa yang boleh anda lakukan dengan tetapan ini. Walaupun toolchain ini masih muda, saya mendapati bahawa menggunakan R3R's React adalah penting untuk dengan jelas menyusun kod permainan WebGL saya. Anda juga boleh menyemak halaman sampel R3R yang kecil tetapi berkembang untuk melihat beberapa contoh kod yang teratur.
Artikel ini dikaji semula oleh Mark Brown dan Kev Zettler. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!
FAQ untuk membina permainan dengan ReactJs dan WebGLApakah prasyarat untuk membina permainan dengan ReactJs dan WebGL?
Bagaimana untuk mengintegrasikan perpaduan dengan reactjs?
Apakah cara yang berbeza untuk membuat aplikasi 3D menggunakan React?
WebGL membolehkan anda membuat grafik 3D interaktif secara langsung dalam penyemak imbas anda, tanpa pemalam. Anda boleh menggunakan API WebGL untuk mencipta grafik, animasi, dan permainan 3D yang kompleks. Walau bagaimanapun, API WebGL adalah peringkat rendah dan ia boleh menjadi rumit untuk digunakan secara langsung. Oleh itu, ramai pemaju lebih suka menggunakan perpustakaan seperti tiga.js yang menyediakan tahap antara muka yang lebih tinggi ke WebGL.
Pakej React-Unity-WebGL membolehkan anda membenamkan Unity WebGL membina aplikasi ReactJS. Ini bermakna anda boleh membuat permainan 3D yang kompleks dengan perpaduan dan kemudian dengan mudah mengintegrasikannya ke dalam aplikasi ReactJS anda. Ini amat berguna jika anda ingin membuat permainan berasaskan web atau aplikasi 3D interaktif.
Mengoptimumkan permainan yang dibina dengan ReactJs dan WebGL mungkin melibatkan pelbagai strategi. Strategi ini termasuk meminimumkan bilangan rerenders dalam React, menggunakan ciri-ciri prestasi terbina dalam WebGL seperti requestAnimationFrame
untuk mencapai animasi yang lancar, dan mengoptimumkan model dan tekstur 3D untuk web.
Ya, anda boleh menggunakan ReactJs dan WebGL untuk membina permainan yang berjalan dalam pelayar web pada peranti mudah alih anda. Walau bagaimanapun, untuk permainan mudah alih asli, anda mungkin ingin mempertimbangkan menggunakan platform pembangunan permainan seperti Unity atau Unreal Engine, yang boleh dieksport terus ke iOS dan Android.
Input pengguna boleh diproses dalam ReactJs dan permainan WebGL menggunakan pengendali acara JavaScript standard. Anda boleh mendengar peristiwa keyboard, tetikus, dan sentuh dan kemudian mengemas kini status permainan dengan sewajarnya. ReactJS juga menyediakan peristiwa sintesis yang boleh digunakan untuk memproses input pengguna merentasi pelayar yang berbeza dengan cara yang konsisten.
Ya, anda boleh menggunakan perpustakaan JavaScript lain dengan ReactJs dan WebGL. Sebagai contoh, anda mungkin menggunakan tiga.js untuk grafik 3D, howler.js untuk audio, atau matter.js untuk pemprosesan fizikal. Kuncinya adalah untuk memastikan perpustakaan ini berfungsi dengan lancar dalam permainan anda.
Permainan yang dibina menggunakan ReactJs dan WebGL boleh disahpepijat menggunakan alat pemaju dalam pelayar web. Alat ini membolehkan anda menyemak kod HTML, CSS, dan JavaScript, melihat log konsol, dan debug kod langkah demi langkah. Di samping itu, Alat Pemaju React adalah lanjutan penyemak imbas yang membolehkan anda menyemak hierarki komponen, prop, dan negeri.
Atas ialah kandungan terperinci Membina permainan dengan Three.js, React dan WebGL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!