Membina permainan dengan Three.js, React dan WebGL

mata teras

Menggunakan React to Drive Scenes 3D dalam Pembangunan Permainan mempunyai banyak kelebihan, termasuk pemisahan yang jelas mengenai rendering adegan dari logik permainan, komponen yang mudah difahami, tambah semula masa nyata sumber permainan, dan keupayaan untuk menggunakan alat penyemak imbas asli ke Pemandangan 3D memeriksa dan debug sebagai penanda.
React-Three-Renderer (R3R) menyediakan API deklaratif yang merangkumi tiga.js, membolehkan kod pandangan decoupling dari logik permainan, dan mewujudkan komponen kecil dan mudah difahami.
Apabila enjin permainan berkembang, adalah penting untuk menggunakan mod reducer untuk mengatur logik permainan ke dalam fungsi berasingan. Mod ini membolehkan membuat gelung permainan yang bersih dan jelas dan mudah menambah lebih banyak logik ke gelung permainan.
Pengaliran dan pertimbangan prestasi adalah unik dalam permainan bangunan menggunakan Three.js, React dan WebGL. Menggunakan fungsi garis masa Chrome Devtools adalah tidak ternilai untuk debugging prestasi, dan melaksanakan strategi seperti meminimumkan bilangan pemberi semula dalam React dapat membantu mengoptimumkan prestasi.

Saya membuat permainan yang dipanggil "Chameleon Charm". Ia dibina menggunakan Three.js, React dan WebGL. Artikel ini menerangkan bagaimana teknologi ini berfungsi bersama-sama menggunakan React-Three Renderer (disingkat sebagai R3R).

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.

permulaan segala -galanya

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?"

Beberapa tahun kemudian, saya 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:

• Pandangan "Deklaratif" membolehkan anda untuk memisahkan adegan yang jelas dari logik permainan.
• Reka bentuk komponen yang mudah difahami seperti <player></player>, <wall></wall>, <level></level>, dan banyak lagi.
• "panas" (masa nyata) Muat semula sumber permainan. Tukar tekstur dan model dan lihat kemas kini mereka di tempat kejadian dalam masa nyata!
• Semak dan debug adegan 3D sebagai tag menggunakan alat penyemak imbas asli seperti Inspektor Chrome.
• Urus sumber permainan dalam graf ketergantungan menggunakan webpack, mis <texture require="" src="%7B"></texture>
mari kita buat senario untuk melihat bagaimana semua ini berfungsi.

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.

R3R mendedahkan API deklaratif yang merangkumi tiga.js. Sebagai contoh, kita boleh menulis:

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>

Kami boleh menggunakan corak yang berguna untuk membantu mengatur kod ini. Mengemas kini lokasi robot adalah pengiraan berasaskan masa yang mudah. Pada masa akan datang, ia juga boleh mempertimbangkan lokasi robot sebelumnya dari negeri permainan terdahulu. Fungsi yang menerima beberapa data, memprosesnya, dan mengembalikan data baru sering dipanggil pengurangan. Kita boleh abstrak kod bergerak ke dalam fungsi reducer!

<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

Ini masih merupakan kawasan pembangunan untuk R3R. Untuk tekstur, anda boleh menentukan harta URL pada tag JSX. Menggunakan webpack, anda boleh meminta laluan imej tempatan:

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.

• Saya menggunakan Webpack untuk waktu tambah nilai panas sehingga 30 saat! Ini kerana setiap beban perlu menulis sumber yang besar kepada pakej. Penyelesaiannya adalah untuk melaksanakan dllplugin Webpack, yang mengurangkan masa tambah nilai hingga kurang dari 5 saat.
• Sebaik -baiknya, adegan anda harus dipanggil hanya sekali setiap bingkai rendering. Selepas menganalisis permainan saya, React sendiri adalah kesesakan utama. Memanggil setState() berbilang kali setiap bingkai akan menghasilkan rendering dua kali dan merendahkan prestasi. setState()
Selepas melebihi sejumlah objek, prestasi R3R akan lebih buruk daripada kod tiga.js biasa. Kepada saya, ia adalah kira -kira 1000 objek. Anda boleh membandingkan R3R dengan tiga.js dalam "penanda aras" dalam contoh.

Fungsi garis masa Chrome Devtools adalah alat yang sangat baik untuk prestasi debugging. Anda boleh dengan mudah dan intuitif memeriksa gelung permainan, dan lebih mudah dibaca daripada ciri "profil" Devtools.

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 WebGL

Apakah prasyarat untuk membina permainan dengan ReactJs dan WebGL?

Untuk memulakan permainan membina dengan ReactJs dan WebGL, anda memerlukan pemahaman asas tentang JavaScript, HTML, dan CSS. Juga perlu tahu ReactJs (perpustakaan JavaScript yang popular untuk membina antara muka pengguna). Di samping itu, adalah penting untuk memahami WebGL (Perpustakaan Grafik Web), API JavaScript untuk memberikan grafik 3D dan 2D interaktif. Ia juga akan memberi manfaat yang besar untuk mengenali sintaks ES6, NPM (Pengurus Pakej Node) dan baris arahan.

Bagaimana untuk mengintegrasikan perpaduan dengan reactjs?

Perpaduan boleh diintegrasikan dengan ReactJs menggunakan pakej React-Unity-WebGL. Pakej ini membolehkan anda membenamkan Unity WebGL membina aplikasi ReactJS. Anda boleh memasangnya menggunakan NPM dan mengimportnya ke dalam projek anda. Anda kemudian boleh menggunakan komponen Perpaduan yang disediakan oleh pakej untuk membenamkan permainan perpaduan anda ke dalam aplikasi ReactJS anda.

Apakah cara yang berbeza untuk membuat aplikasi 3D menggunakan React?

Terdapat beberapa cara untuk membuat aplikasi 3D menggunakan React. Salah satu kaedah yang paling popular ialah menggunakan Three.js, perpustakaan JavaScript silang untuk membuat dan memaparkan grafik komputer 3D animasi. Pendekatan lain adalah menggunakan WebGL secara langsung, tetapi ini mungkin lebih rumit. Perpustakaan lain seperti React-Three-Fiber dan React-Unity-WebGL juga boleh digunakan untuk membuat aplikasi 3D menggunakan React.

Bagaimana untuk membuat grafik 3D interaktif menggunakan WebGL?

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.

Apakah peranan React-Unity-WebGL dalam Pembangunan Permainan?

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.

Bagaimana untuk mengoptimumkan permainan ReactJs dan WebGL saya untuk prestasi?

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.

Bolehkah saya membina permainan mudah alih menggunakan ReactJs dan WebGL?

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.

Bagaimana memproses input pengguna dalam permainan reactjs dan webgl saya?

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.

Bolehkah saya menggunakan perpustakaan JavaScript lain dengan ReactJs dan WebGL?

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.

bagaimana untuk debug permainan reactjs dan webgl saya?

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!