Bangun game fisika WebGL Anda sendiri

Sep 16, 2025

Bagaimana caranya

Proyek ini akan dibagi menjadi bagian yang berbeda. Kami akan memberikan pengantar singkat kepada Heroku, menunjukkan cara menggunakan forjan dengan threen.js, jelaskan cara menangani acara soket di atas node.js dan juga bagaimana kita menangani data yang dikirim.

20 contoh luar biasa dari WebGL beraksi

01. Heroku.

Heroku is an easy to use and free to trial node.js web server — Heroku adalah yang mudah digunakan dan bebas ke uji coba server web node.js

Proyek ini akan dihosting Heroku. , yang merupakan platform cloud untuk meng-host aplikasi Anda. Ini memiliki berbagai macam bahasa yang didukung seperti Ruby, Jawa, PHP dan Python. Kita akan menggunakan node.js.

Daftar untuk akun dan pilih Node.js. Untuk proyek ini, kami dapat menggunakan server dasar, yang tidak dikenai biaya. Setelah pendaftaran, Anda akan datang ke dasbor Anda di mana Anda dapat membuat aplikasi Anda. Ini akan membuat subdomain di herokuapp.com.

Sebagai metode penempatan, Anda dapat memilih untuk menggunakan antarmuka baris perintah Heroku (CLI) untuk menyebarkan menggunakan git repositori, atau memiliki koneksi yang diatur ke GitHub atau Dropbox. Saya telah memilih untuk pergi dengan CLI-nya; Ini akan membutuhkan instalasi. Tetapi sebagai imbalan Anda mendapatkan berbagai alat bermanfaat baru, salah satunya adalah debugging langsung melalui terminal Anda.

Untuk mengatur server Anda, saya sarankan mengikuti langkah-langkah seperti yang dijelaskan di sini .

Untuk menyebarkan Anda menggunakan perintah git default. Setiap yang Anda gunakan akan memicu server build dan aplikasi Anda akan dikerahkan ke server Heroku dan kemudian dapat dilihat di subdomain Anda.

Setelah kode dikerahkan, Anda dapat melihat proyek Anda di [You YouProject] .HerokuApp.com. Untuk melihat log, gunakan perintah 'Heroku Logs - Tail' di terminal Anda. Beberapa hal yang ditampilkan adalah apa yang disajikan untuk klien - itu menunjukkan koneksi soket, dan jika Anda ingin men-debug kode Anda, Anda juga dapat menggunakan konsol.log untuk output ke terminal.

02. Bangun adegan fisika

Tap your screen or hit the spacebar to bounce the table up — Ketuk layar Anda atau tekan spasi untuk memantulkan tabel

Kami akan menggunakan yang paling populer Webgl. kerangka, tiga.js. , untuk membangun adegan 3D yang berisi objek yang akan kami lampirkan fisika. Perpustakaan Fisika pilihan adalah Fisijs. , plug-in untuk three.js. Sebagai ekstensi ke Tiga.JS, Physijs menggunakan konvensi pengkodean yang sama, membuatnya lebih mudah digunakan jika Anda sudah terbiasa dengan three.js.

Hal pertama adalah tabel biliar. Kami menggunakan Physijs HeightfieldMesh. , Karena mesh ini akan membaca ketinggian dari pesawat terbang. Jadi pada dasarnya akan membungkus dirinya sendiri di sekitar objek ketiga.js.

 var teamgeGeometry = Tiga Baru.Planegometry (650, 500, 10, 10);
var tablematerial = fisijs.creatematerial (
  baru tiga.meshphongmaterial ({
    Shininess: 1,
    Warna: 0xB00000,
    emisive: 0x111111,
    Sisi: Tiga. DuaBlingide
  }),
  0,8, // gesekan
  .4 // Restitusi
);
Table = New Physijs.heightfieldMesh (TasingGeometry, Tablematerial, 0);

Begitu HeightfieldMesh. membutuhkan geometri tetapi juga bahan fisijek. Kami menambahkan dua fitur baru ke materi tiga .js. Itu adalah gesekan dan restitusi variabel. Gesekan adalah resistensi yang dihasilkan objek, dan restitusi mengacu pada 'bounciness'. Kedua variabel ini akan mendefinisikan seberapa nyata fisika akan terasa seperti di tempat kejadian Anda.

Untuk bola biliar yang dibuat, kami tidak ingin membuatnya terlalu goyang, jadi simpan nomornya rendah. Seperti tiga.js, Physijs juga memiliki serangkaian bentuk dasar untuk berkeliling jala asli. Spheremesh. membungkus SPRAEGEOMETRI akan memberikan bola fisika. Saat menginisialisasi adegan, kami menelepon BANGUNAN (8) , yang akan memicu fungsi-fungsi berikut ...

 var buildball = fungsi (numbrball) {
 var balltexture = new threen.texture ();
 var Ballindex = Ball.Length;

Tambahkan tekstur:

 balltexture = three.imageutils.queltexture ('tekstur /' + numbrball + '_ball.jpg', fungsi (gambar) {
     balltexture.Image = gambar;
  });

Buat materi yang diaktifkan fortijs dengan beberapa friksi dan bouncing properti yang layak:

var ballmaterial = fisijek.RATUTEMATER (
    baru tiga.meshlambertmaterial ({{
      Peta: BallTexture,
      Shininess: 10,
      Warna: 0xdddddd,
      emisive: 0x111111,
      Sisi: Tiga. Frontside.
    }),
    0,6, // gesekan
    .5 // Restitusi
  );

Pemetaan tekstur:

 Ballmaterial.map.wraps = Ballmaterial.map.wrapt = three.repeatwrapping;
  Ballmaterial.map.Repeat.Set (1, 1);
 Buat Spheremesh Fisika-Diaktifkan, dan mulai di udara:

  BALL [BALDINDEX] = Physijs.spheremesh baru (
    baru tiga. Pufperometri (25, 25, 25),
    Ballmaterial,
    100.
  );
  // y mengimbangi ke bagian atas kanvas
  Ball [Ballindex] .Position.y = 500;
  // bayangan.
  Bola [Ballindex] .Receiveshadow = Benar;
  bola [ballindex] .castsHadow = true;
  // tambahkan bola ke kanvas Anda
  adegan.add (bola [ballindex]);
};

Kami menambahkan tekstur dari file .jpg. Buat bahan dan gunakan itu untuk Spheremesh. Untuk membuat objek, yang akan kita letakkan secara vertikal ke atas sehingga turun ke layar.

03. Soket koneksi

The key goal of our game is emulating the physical movements to the screen — Tujuan utama dari permainan kami adalah meniru gerakan fisik ke layar

Untuk komunikasi antara server dan klien, kami akan menggunakan socket.io. . Ini adalah salah satu perpustakaan paling andal yang tersedia untuk Node.js. Ini dibangun di atas API Websockets.

Sekarang fisika diaktifkan untuk jerat yang kami butuhkan input pengguna untuk membuat game interaktif. Perangkat input yang kami gunakan adalah perangkat seluler. Peramban seluler adalah pengontrol yang akan menyediakan data dari accelerometer dan giroskop ke desktop di mana Anda akan melihat permainan.

Pertama, koneksi antara browser seluler dan browser desktop harus dibuat. Setiap kali browser terhubung dengan aplikasi Node.js kami, kami perlu membuat koneksi baru. Koneksi sisi klien diatur dengan menggunakan yang berikut:

 var socket = io.connect ();

Untuk mengirim pesan yang Anda gunakan memancarkan fungsi:

 socket.emit ('nama acara', data);

Dan untuk menerima Anda menggunakan .di() fungsi:

 socket.on ('nama acara', fungsi () {});

03.1. Menyiapkan game desktop

Jika kita berada di desktop, kami akan mengirimkan soket kami perangkat yang memancarkan memberi tahu server kami desktop adalah game menggunakan baris kode berikut:

 var socket = io.connect ();
// Ketika pesan selamat datang awal, balas dengan jenis perangkat 'game'
socket.on ('selamat datang', fungsi (data) {
  socket.emit ("perangkat", {"Type": "Game"});
});

Server akan mengembalikan kami kode kunci / game yang unik dihasilkan oleh Crypto. . Ini akan ditampilkan ke desktop.

 // Hasilkan kode
var gamecode = crypto.randombytes (3) .tostring ('hex'). substring (0, 4) .Tolowercase ();
// Pastikan keunikan.
sementara (gamecode di socketcodes) {
  Gamecode = crypto.randombytes (3) .tostring ('hex'). substring (0, 4) .tolowercase ();
}
// Simpan kode game - & gt; soket asosiasi.
socketcodes [gamecode] = io.sockets.s [socket.id];
socket.gamecode = gamecode

Beri tahu klien game untuk menginisialisasi dan menunjukkan kode permainan ke pengguna ...

 socket.emit ("inisialisasi", gamecode);

03.2. Hubungkan pengontrol ke permainan

Untuk menghubungkan perangkat seluler ke permainan, kami akan menggunakan formulir untuk mengirimkan kode game dari layar desktop. Pada formulir kirim kami akan mengirimkan kode game ke server untuk otentikasi.

 socket.emit ("perangkat", {"ketik": "controller", "gamecode": Gamecode});

Server akan memeriksa apakah kode game valid dan akan mengatur koneksi dengan game desktop

 if (device.gamecode di socketcodes) {
  // Simpan kode game untuk perintah controller
  socket.gamecode = device.gamecode.
  // inisialisasi pengontrol
  socket.emit ("terhubung", {});
  // memulai permainan
  socketcodes [device.gamecode] .emit ("terhubung", {});
}

Setelah koneksi diatur, kami kemudian akan memberikan 8-Ball Push kecil dari X dan Z dengan perintah berikut ...

 Bola  .SetLineArvelocity (New Tiga.Vector3 (30, 0, 30));

04. Mengirim data

Sekarang koneksi dibuat, kami ingin mengirim variabel Gyro dan Accelerometer ke dalam game. Dengan menggunakan window.ondevicotion. dan window.ondeviceorientation. Acara, kami memiliki data yang kami butuhkan untuk meniru pergerakan tilt ponsel kami yang sama ke meja biliar. Saya telah memilih untuk menggunakan interval 100ms untuk memancarkan nilai-nilai tersebut.

setternerval (fungsi () {
  socket.emit ('Kirim Gyro', [Math.round (Roty), Math.round (ROTX), AY, AXE]);
}, intervaltime);

Di sisi klien kami akan menyelesaikan latensi dengan men-tweening nilai masuk dari server ke kemiringan tabel biliar. Untuk tweening yang kita gunakan Tweenmax. .

 // menangani data gyro yang masuk
socket.on ('gyro' baru ', fungsi (data) {
  var degy = data  & lt; 0? Math.abs (data ): -data ;
  Tweenmax.to (tabel.rotation, 0,3, {
    X: degtorad (degy - 90),
    Y: degtorad (data ),
    Kemudahan: Linear.Easone,
    onupdate: fungsi () {
        Tabel .__ kotorRotasi = Benar;
    }
  });
});

05. Acara ekstra

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile — Lebih banyak bola sama dengan lebih menyenangkan. Coba hitting bilah spasi atau mengetuk layar ponsel Anda

Untuk memberikannya sedikit lebih interaktivitas, saya telah menambahkan beberapa acara tambahan bagi pengguna untuk bermain. Kami akan memberikan opsi kepada pengguna untuk menambahkan bola tambahan di sebelah 8-Ball dengan menggunakan angka pada keyboard.

Yang lain adalah memantulkan meja ke atas. Untuk ini, Anda dapat menekan bilah spasi. Tapi kami juga menambahkan acara tap pada perangkat controller. Ini akan mengirim acara ke meja biliar, yang akan naik meja dan mengirim bola ke atas.

Pertama kita perlu menangkap acara keyboard ...

 // Buat Balls / Slam Table pada bilah spasi
dokumen.addeventlistener ('keydown', fungsi (e) {
  If (E.KeyCode == 49) {// Kunci: 1
    BANGUNAN (1);
  } else if (e.keycode == 50) {// kunci: 1
    BANGUNAN (2);
  } else if (e.keycode == 51) {// kunci: 1
    Buildball (3);
  } else if (e.keycode == 32) {// kunci: spasi
    Bounceetable ();
  }
});

Itu BANGUNAN Fungsi adalah fungsi yang sama kami gunakan untuk membuat bola 8-bola. Kami hanya menggunakan tekstur yang berbeda yang akan membungkus bola. Untuk mendorong meja, kami memberikan tabel gerakan ke atas sepanjang sumbu Y dengan kode ini ...

 Tabel.SetLineRevelocity (New Tiga.Vector3 (0, 500, 0));

Kesimpulan

Add more balls and see how much your browser can handle — Tambahkan lebih banyak bola dan lihat berapa banyak browser Anda dapat menangani

Ketika Anda memiliki konsep untuk permainan atau apa pun, sangat mungkin ada perpustakaan di luar sana yang dapat membuat hidup Anda lebih mudah. Ini adalah demo yang menunjukkan bagaimana ini bisa berhasil. Kami berharap ini akan membantu memicu beberapa ide kreatif atau membantu Anda dengan proyek Anda saat ini. Lihat contoh langsung dari permainan sini , atau menemukannya Github. .

Artikel ini awalnya diterbitkan dalam Edisi 300 dari bersih , majalah top dunia untuk desainer dan pengembang web profesional. Beli Masalah 300. atau berlangganan di sini .

Artikel terkait:

Mulailah dengan WebGL menggunakan three.js
20 alat JavaScript untuk meledakkan pikiran Anda
Buat visual 3D interaktif dengan three.js

Bangun game fisika WebGL Anda sendiri

01. Heroku.

02. Bangun adegan fisika

03. Soket koneksi

03.1. Menyiapkan game desktop

03.2. Hubungkan pengontrol ke permainan

04. Mengirim data

05. Acara ekstra

Kesimpulan

Bagaimana caranya - Artikel Terpopuler

Cara menggambar otot

Tipografi Merek: Panduan Lengkap

Cara menambahkan animasi ke SVG dengan CSS

Cara melukis miniatur yang menyenangkan

Cara merancang formulir responsif dan device-agnostik

Dapatkan Grips dengan Teknik Lukisan Basah Basah

11 tips untuk membuat lanskap berair dalam 3D

Buat komposit di Photoshop

Kategori