Construiți-vă propriul joc de fizică WebGL

Sep 12, 2025
să

Acest proiect va fi împărțit în diferite părți. Vom da o scurtă introducere la Heroku, arată cum să utilizați Fizijs cu trei.js, explicați cum să gestionați evenimentele de soclu peste nod.js și cum mergem la manipularea datelor trimise.

  • 20 exemple uimitoare de WebGL în acțiune

01. Heroku.

Heroku is an easy to use and free to trial node.js web server

Heroku este ușor de utilizat și gratuit la node.js server web

Acest proiect va fi găzduit pe Heroku. , care este o platformă de nori pentru a vă găzdui aplicațiile. Are o mare varietate de limbi acceptate, cum ar fi Ruby, Java, PHP și Python. Vom folosi NODE.JS.

Înscrieți-vă pentru un cont și alegeți NODE.JS. Pentru acest proiect putem folosi serverul de bază, care este gratuit. După înregistrare, veți veni la tabloul de bord, unde vă puteți crea aplicația. Acest lucru va crea un subdomeniu la HerokuApp.com.

Ca metodă de implementare, puteți alege fie să utilizați interfața liniei de comandă Heroku (CLI) pentru a implementa utilizând depozitul său git sau pentru a avea o conexiune configurată până la GitHub sau Dropbox. Am ales să merg cu CLI; Acest lucru va necesita o instalare. Dar, în schimb, obțineți o varietate de noi instrumente utile, unul dintre acestea este depanarea live prin terminalul dvs.

Pentru configurarea serverului, recomand să urmați pașii așa cum este descris aici .

Pentru a vă deplasa, utilizați comenzi implicite git. Fiecare dintre cei pe care îi utilizați va declanșa serverul de construcție și aplicația dvs. va fi implementată pe serverul Heroku și apoi va fi vizibilă la subdomeniul dvs.

Odată ce codul este implementat, puteți vizualiza proiectul dvs. la [Yourproject] .HerokuApp.com. Pentru a vizualiza jurnalele, utilizați comanda "Heroku Logs - coadă" din terminalul dvs. Unele dintre lucrurile fiind arătate sunt ceea ce este servit clientului - arată conexiunile socket, iar dacă doriți să depanați codul, puteți utiliza și consola.log pentru a ieși la terminal.

02. Construiți scena fizică

Tap your screen or hit the spacebar to bounce the table up

Atingeți ecranul sau apăsați bara de spațiu pentru a sări masa în sus

Vom folosi cele mai populare Webgl. cadru, Trei.js. , pentru a construi o scenă 3D care conține un obiect pe care vom atașa fizica. Biblioteca de alegere a fizicii este Fizijs. , un plug-in pentru trei. Ca o extensie la trei.js, Fizijs utilizează aceeași convenție de codificare, făcându-l mai ușor de utilizat dacă sunteți deja familiarizat cu trei.

Primul lucru este masa de biliard. Folosim Fizijii Heightfieldmesh. , pentru că această rețea va citi înălțimea de la plangeometrie. Deci, în principiu, se va înfășura în jurul obiectului trei. 

 VAR TABLEGEOMETHERING = Noua trei.planeghere (650, 500, 10, 10);
VAR TableMaterial = Fizijs.Creatematerial (
  nou trei.meshphongmaterial ({{
    Shininess: 1,
    Culoare: 0xb00000,
    Emissive: 0x111111,
    Side: Trei.Doubleside
  }),
  .8, // frecare
  .4 // restituire
);
Tabelul = New Fizijs.HightfieldMeh (Tablejeometrie, Tablematerial, 0);

Asa de Heightfieldmesh. Necesită o geometrie, dar și un material de fizijie. Adăugam două caracteristici noi la materialul trei. Acestea sunt frecare și restituire variabile. Fricțiunea este rezistența pe care obiectul îl face și restituirea se referă la "bounciness". Aceste două variabile vor defini cât de reală se va simți fizica în scena voastră.

Pentru bilele de piscină create, nu vrem să le facem prea bouncy, așa că păstrați numărul scăzut. Ca trei.js, Fizijs are, de asemenea, o serie de forme de bază pentru a merge în jurul ochiului de plasă originală. Spheremesh. Împachetarea Spheregeometrie va da fizica mingea. Când inițializați scena, sunăm buildball (8) , care va declanșa următoarea funcție ... 

 VAR Buildball = Funcție (numere) {
 VAR BallTeTure = Noua 3 ();
 Var Ballindex = Ball.Length;

Adăugați textura: 

 balter = trei.imageutils.loadtextive ("Texturile / '+ numere +' _ball.jpg ', funcția (imagine) {
     balter.Image = imagine;
  });

Creați materialul activat de Fizijs cu o anumită frecare decentă și proprietăți Bounce: 

Var BallMaterial = Fizijs.creatematerial (
    nou trei.meshlambertateriale ({{
      Harta: BallTeTive,
      Shininess: 10,
      Culoare: 0xDDDDDD,
      Emissive: 0x111111,
      Side: Trei.Frontside
    }),
    .6, // frecare
    .5 // restituire
  );

Cartografierea texturii: 

 BallMaterial.map.wrapps = BallMaterial.map.Wrapt = Trei.RepeatWrapping;
  ballmaterial.map.repeat.set (1, 1);
 Creați SPhemesh-ul activat de fizică și începeți-l în aer:

  Ball [Ballindex] = New Fizijs.sphermesh (
    Nou trei.Spheregeometrie (25, 25, 25),
    BallMaterial,
    100.
  );
  // y offset în partea de sus a pânzei
  mingea [ballindex] .position.y = 500;
  // umbre
  minge [ballindex] .Receiveihadow = adevărat;
  minge [ballindex] .castshadow = adevărat;
  // Adăugați mingea la pânza dvs.
  scena.add (minge [ballindex]);
};

Adăugăm textura dintr-un fișier .jpg. Creați materialul și utilizați asta pentru Spheremesh. Pentru a crea obiectul, pe care vom plasa vertical la partea superioară, astfel încât acesta să scadă pe ecran.

03. Conectarea soclurilor

The key goal of our game is emulating the physical movements to the screen

Scopul cheie al jocului nostru este eliminarea mișcărilor fizice pe ecran

Pentru comunicarea între server și client, vom folosi socket.io. . Aceasta este una dintre cele mai fiabile biblioteci disponibile pentru NODE.JS. Este construit pe partea de sus a API-ului Websockets.

Acum fizica este activată pentru mese Avem nevoie de introducerea utilizatorului pentru a face jocul interactiv. Dispozitivul de intrare pe care îl folosim este dispozitivul mobil. Browserul mobil este controlerul care va furniza date de la accelerometru și giroscop la desktop unde veți vedea jocul.

În primul rând, trebuie făcută o conexiune între browserul mobil și browserul desktop. De fiecare dată când un browser conectează cu aplicația nod.js, trebuie să facem o nouă conexiune. O conexiune laterală a clientului este configurată utilizând următoarele: 

 VAR Socket = io.connect ();

Pentru trimiterea mesajelor pe care le utilizați emite funcţie: 

 socket.emit (denumirea evenimentului ", date);

Și pentru primirea dvs., utilizați .pe() funcţie: 

 socket.on ("numele evenimentului", funcția () {});

03.1. Configurarea jocului desktop

Dacă suntem pe un desktop, vom trimite soclurile noastre un dispozitiv Emit Spunerea serverului nostru Desktopul este jocul folosind următoarea linie de cod: 

 VAR Socket = io.connect ();
// Când mesajul inițial de întâmpinare, răspundeți cu tipul de dispozitiv "Game"
socket.on ("Bine ați venit", funcție (date) {
  socket.emit ("dispozitiv", {"Tip": "Joc"});
});

Serverul ne va întoarce un cod unic cheie / joc generate de Crypto. . Acest lucru va fi afișat pe desktop. 

 // Generați un cod
var gamecode = cripto.randombytes (3) .tostring ('hex'). Substring (0, 4)
// Asigurați unicitatea
în timp ce (codul de joc în socketcodes) {
  gamecode = cripto.randombytes (3) .pertring ("hex"). Substring (0, 4) .tolowowcase ();
}
// magazin de coduri de joc - & gt; Asociația de soclu
socketcode [gamecode] = io.sockets.sockets [socket.id];
socket.gamecode = cod de joc

Spuneți clientului jocului să inițializeze și să afișeze codul de joc la utilizator ... 

 socket.emit ("inițializați", cod de joc);

03.2. Conectați controlerul la joc

Pentru a conecta dispozitivul mobil la joc, vom folosi un formular pentru a trimite codul de joc din ecranul desktop. Pe formularul Trimiteți, vom trimite codul de joc pe serverul pentru autentificare. 

 socket.emit ("dispozitiv", {"Tip": "controler", "joc de joc": gamecode});

Serverul va verifica dacă codul de joc este valid și va configura conexiunea cu jocul desktop 

 dacă (dispozitiv.gamecode în socketcodes) {
  // Salvați codul de joc pentru comenzile controlerului
  socket.gamecode = dispozitiv.gamecode.
  // inițializați controlerul
  socket.emit ("conectat", {});
  // incepe jocul
  socketcode [dispozitiv.gamecode] .emit ("conectat", {});
}

Odată ce conexiunea este setată, vom da apoi 8-balmei o mică împingere de la X și Z cu următoarea comandă ... 

 mingea 
 .setlinearvelocity (noul trei.vector3 (30, 0, 30));

04. Trimiterea datelor

Acum că conexiunea este stabilită, dorim să trimitem variabilele giro și accelerometru la joc. Folosind. fereastră.ondevicemotion si fereastră.ondeviceorită Evenimente, avem datele de care avem nevoie pentru a emula aceleași mișcări de înclinare ale telefonului la masa de biliard. Am ales să folosesc un interval de 100ms pentru a emite aceste valori. 

SetInterval (funcția () {
  socket.emit ("Trimite Gyro", [Math.round (Roty), Math.round (Rotx), Ay, Ax]);
}, intervaltime);

Pe partea clientului vom rezolva latența prin transmiterea valorilor primite de la server la înclinarea mesei de biliard. Pentru Tweening folosim Tweenmax. . 

 // Manipulați datele giroscute primite
socket.on ("New Gyro", funcția (date) {
  var ggy = date 
 & lt; 0? Math.Abs ​​(date 
): -Data 
;
  Tweenmax.to (table.rotation, 0.3, {
    X: DEGTORAD (DEGE - 90),
    y: Degtorad (date 
),
    Ușurință: liniar.easerne,
    Onupdate: Funcție () {
        tabel .__ Dirtyrotation = Adevărat;
    }
  });
});

05. Evenimente suplimentare

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile

Mai multe bile sunt egale mai multă distracție. Încercați să loviți bara de spațiu sau atingeți ecranul telefonului mobil

Pentru a oferi o mai mare interactivitate, am adăugat câteva evenimente suplimentare pentru ca utilizatorul să se joace. Vom da utilizatorului opțiunea de a adăuga bile suplimentare lângă 8-Ball utilizând numerele de pe tastatură.

Un altul este să săriți masa în sus. Pentru aceasta puteți lovi bara de spațiu. Dar adăugăm și un eveniment de atingere pe dispozitivul controlerului. Acest lucru va trimite un eveniment la masa de biliard, care va crește tabelul și va trimite bilele în sus.

Mai întâi trebuie să prindem evenimentele de la tastatură ... 

 // Creați bile / masa de slam pe bara de spațiu
document.addeventlistener ("cheie", funcție (e) {
  dacă (e.keycode == 49) {// cheie: 1
    buildball (1);
  } altfel dacă (e.keycode == 50) {// cheie: 1
    buildball (2);
  } altfel dacă (e.keycode == 51) {// cheie: 1
    buildball (3);
  } altfel dacă (e.keycode == 32) {// cheie: bara de spațiu
    bouncetable ();
  }
});

Buildball. Funcția este aceeași funcție pe care am folosit-o pentru a crea sfera 8-minge. Folosim doar texturi diferite care vor înfășura sfera. Pentru împingerea masa în sus, dăm masa o mișcare ascendentă de-a lungul axei Y cu acest cod ... 

 table.setlinearvelocity (nou trei.vector3 (0, 500, 0));

Concluzie

Add more balls and see how much your browser can handle

Adăugați mai multe bile și vedeți cât de mult se poate descurca browserul dvs.

Când aveți un concept pentru un joc sau altceva, este în întregime probabil că există biblioteci care ar putea să vă ușureze viața. Acesta este un demo care arată cum poate funcționa acest lucru. Sperăm că acest lucru va contribui la scânteia unor idei creative sau vă va ajuta cu proiectul actual. Vedeți un exemplu live al jocului Aici sau găsiți-o Github. .

Acest articol a fost inițial publicat în numărul 300 de net , Magazine de top din lume pentru designeri și dezvoltatori profesioniști. Cumpăra problema 300. sau Abonați-vă aici .

Articole similare:

  • Începeți cu WebGL folosind trei.js
  • 20 de instrumente JavaScript pentru a vă sufla mintea
  • Creați vizuale 3D interactive cu trei.js

să - Cele mai populare articole

Cum de a desena o pisică

să Sep 12, 2025

Vrei să știi cum să desenezi o pisică? Ai ajuns la locul potrivit. Desenarea animalelor pot fi complicate, dar este, de aseme..

21 moduri de a vă optimiza CSS și accelerați site-ul dvs.

să Sep 12, 2025

CSS trebuie să treacă printr-o conductă relativ complexă, la fel ca HTML și JavaScript. Browserul trebuie să descărcați f..

Cum să pictezi un zombie în vopsea studio clip

să Sep 12, 2025

În acest tutorial de desen, veți învăța Cum să atrageți și să pictați un zombie folosind Vopsea ..

Cum să pictați reflexii convingătoare

să Sep 12, 2025

Tehnicile de pictură digitală fac posibilă descrierea reflecțiilor în sticlă într-o manieră relativ simplă. Desigur, est..

Cum să începeți cu SASS

să Sep 12, 2025

Sass. Este un instrument puternic care aduce multe caracteristici din alte limbi de programare în CSS - cum ar fi fu..

Creați o schiță digitală ETCH

să Sep 12, 2025

În acest tutorial, luăm jucăria mecanică de desen etch o schiță ca o inspirație și încercarea de a implementa aceste car..

Documentați sistemele de proiectare cu fractal

să Sep 12, 2025

Vă place să învățați mai multe despre sistemele de proiectare? Atunci nu ratați inginerul UI senior ..

Creați copii digitale de calitate ale artei dvs.

să Sep 12, 2025

Arta nu este doar despre crearea, este și despre partajare. Odată ce ați făcut o lucrare frumoasă, sunteți mândru, este doar natural că veți dori ca alții să o vadă și ei. Exist�..

Categorii