Byg dit eget WebGL Physics-spil

Feb 3, 2026

hvordan

Dette projekt vil blive opdelt i forskellige dele. Vi vil give en kort introduktion til Heroku, vise, hvordan man bruger fysijs med tre.js, forklare, hvordan man håndterer stikkontakter over node.js og også hvordan vi går om at håndtere de sendte data.

20 fantastiske eksempler på Webgl i aktion

01. Heroku.

Heroku is an easy to use and free to trial node.js web server — HEROKU er en nem at bruge og gratis til at prøve node.js webserver

Dette projekt vil blive hostet på Heroku. , som er en cloud platform til at være vært for dine apps. Det har en bred vifte af understøttede sprog som Ruby, Java, PHP og Python. Vi skal bruge node.js.

Tilmeld dig en konto og vælg node.js. For dette projekt kan vi bruge den grundlæggende server, som er gratis. Efter registrering kommer du til dit dashboard, hvor du kan oprette din app. Dette vil skabe et underdomæne på Herokuapp.com.

Som en implementeringsmetode kan du vælge at enten bruge HEROKU Command Line Interface (CLI) til at implementere ved hjælp af sit git-repository, eller have en forbindelse oprettet til GitHub eller Dropbox. Jeg har valgt at gå med sin CLI; Dette vil kræve en installation. Men til gengæld får du en række nye nyttige værktøjer, en af disse er live debugging gennem din terminal.

For at oprette din server anbefaler jeg at følge trinene som beskrevet her .

For at implementere bruger du standard GIT-kommandoer. Hver du bruger, vil udløse Build Server, og din app vil blive implementeret til Heroku-serveren og derefter kan ses på dit underdomæne.

Når koden er implementeret, kan du se dit projekt på [YourProject] .herokuapp.com. For at se logfilerne skal du bruge kommandoen 'Heroku logs - hale' i din terminal. Nogle af de viste ting er, hvad der serveres til klienten - det viser stikkontakterne, og hvis du vil debug din kode, kan du også bruge konsollen. Log for at udskrive til terminalen.

02. Byg fysik scenen

Tap your screen or hit the spacebar to bounce the table up — Tryk på din skærm eller tryk på mellemrumstasten for at hoppe på bordet op

Vi bruger de mest populære WebGl. rammer, tre.js. , for at opbygge en 3D-scene, der indeholder et objekt, hvormed vi vedhæfter fysik. Fysikbiblioteket valg er Physijs. , en plug-in til tre.js. Som en udvidelse til tre.js bruger Physijs den samme kodende konvention, hvilket gør det nemmere at bruge, hvis du allerede er bekendt med Three.js.

Den første ting er poolbordet. Vi bruger Physijs Højdefieldmesh , fordi dette maske vil læse højden fra planeGeometry. Så det vil i grunden vikle sig rundt om tre.js-objektet.

 Var bordGeometri = ny tre.plangeometri (650, 500, 10, 10);
VAR tabletmateriale = Physijs.createMaterial (
  Nye tre.MhPhongMaterial ({
    Shininess: 1,
    Farve: 0xB00000,
    Emissive: 0x111111,
    Side: Three.Doubleside.
  }),
  .8, // friktion
  .4 // restitution.
);
bord = nyt fysijs.heightfieldmesh (bordholdometri, tabletmateriale, 0);

Så Højdefieldmesh Kræver en geometri, men også et fysijs materiale. Vi tilføjer to nye funktioner til Three.js materiale. Det er friktion og Restitution. variabler. Friktion er modstanden, som objektet gør, og restitution refererer til 'Bounciness'. Disse to variabler vil definere, hvor virkelige fysikken vil føle sig som i din scene.

For de skabte poolbolde ønsker vi ikke at gøre dem for hoppende, så hold nummeret lavt. Ligesom tre.js har Physijs også en række grundlæggende former for at gå rundt om det oprindelige net. Sferemesh. indpakning af Spfesteometri. vil give bolden fysik. Når du initialiserer scenen, kalder vi buildball (8) , som vil udløse følgende funktion ...

 var buildball = funktion (nummerball) {
 var balltexture = ny tre.Texture ();
 Var Ballindex = Ball.Length;

Tilføj tekstur:

 balltexture = tre.imageutils.loadtexture ('teksturer /' + nummerball + '_ball.jpg', funktion (billede) {
     balltexture.image = billede;
  });

Opret det fysijs-aktiverede materiale med en anstændig friktion og hoppe egenskaber:

Var Ballmaterial = Physijs.creatematerial (
    New Three.MeshLambertmaterial ({
      Kort: BallTexture,
      Shininess: 10,
      Farve: 0xDDDDDDD,
      Emissive: 0x111111,
      side: tre.frontside.
    }),
    .6, // friktion
    .5 // restitution.
  );

Texture Mapping:

 BALLMATISAL.MAP.WRAPS = BALLMATISAL.MAP.WRAPT = tre.Repeatwrapping;
  ballmaterial.map.reped.set (1, 1);
 Opret det fysik-aktiverede Spferemesh, og start det op i luften:

  Ball [Ballindex] = Ny Physijs.Spheremesh (
    Nye tre.sphereGeetry (25, 25, 25),
    ballmaterialer,
    100.
  );
  // y offset til toppen af lærredet
  kugle [ballindex] .position.y = 500;
  // skygger
  bold [ballindex] .receiveshadow = true;
  bold [ballindex] .castshadow = true;
  // Tilføj bolden til dit lærred
  scene.add (kugle [ballindex]);
};

Vi tilføjer tekstur fra en .jpg-fil. Opret materialet og brug det til Sferemesh. For at oprette objektet, som vi vil placere lodret til toppen, så det falder ind på skærmen.

03. Sockets Connection.

The key goal of our game is emulating the physical movements to the screen — Hovedmålet med vores spil er at emulerer de fysiske bevægelser til skærmen

Til kommunikation mellem serveren og klienten vil vi bruge socket.io . Dette er en af de mest pålidelige biblioteker, der er tilgængelige for node.js. Det er bygget på toppen af WebSockets API.

Nu er fysik aktiveret til maskerne, vi har brug for brugerindgang for at gøre spillet interaktive. Indgangsenheden vi bruger er den mobile enhed. Mobilbrowseren er den controller, der vil give data fra accelerometeret og gyroskopet til skrivebordet, hvor du vil se spillet.

For det første skal der laves en forbindelse mellem mobilbrowseren og desktopbrowseren. Hver gang en browser forbinder med vores node.js app, skal vi lave en ny forbindelse. En klient sideforbindelse er oprettet ved hjælp af følgende:

 var stik = io.connect ();

For at sende beskeder bruger du Emit. fungere:

 socket.emit ('hændelsesnavn', data);

Og for at modtage, at du bruger .på() fungere:

 Socket.On ('Hændelsesnavn', funktion () {});

03.1. Opsætning af skrivebordet spil

Hvis vi er på et skrivebord, sender vi vores stikkontakter en enhed, der fortæller vores server skrivebordet er spillet ved hjælp af følgende linje af kode:

 varstik = io.connect ();
// Når indledende velkomstmeddelelse, svar med 'Game' Device Type
socket.on ('velkommen', funktion (data) {
  socket.emit ("enhed", {"type": "spil"});
});

Serveren returnerer os en unik nøgle / spilkode genereret af Crypto. . Dette vil blive vist til skrivebordet.

 // Generer en kode
Var Gamecode = Crypto.Randombytes (3) .ToString ('hex'). Substring (0, 4) .tolowercase ();
// sikre unikhed
mens (gamecode i socketcodes) {
  Gamecode = Crypto.Randombytes (3) .ToString ('hex'). Substring (0, 4) .tolowerCase ();
}
// Store Game Code - & GT; Socket Association.
socketcodes [gamecode] = io.sockets.sockets [socket.id];
socket.gamecode = Gamecode

Fortæl spilklient til at initialisere og vise spilkoden til brugeren ...

 Socket.emit ("Initialize", Gamecode);

03.2. Tilslut controller til spillet

For at forbinde mobilenheden til spillet, vil vi bruge en formular til at indsende spilkoden fra desktop-skærmen. På formularen indsender vi spillekoden til serveren til godkendelse.

 Socket.emit ("Device", {"Type": "Controller", "Gamecode": Gamecode});

Serveren kontrollerer, om spilkoden er gyldig og vil oprette forbindelsen med skrivebordsspillet

 IF (DEVICE.GAMECODE i stikkoder) {
  // Gem spilkoden for Controller-kommandoer
  socket.gamecode = Device.Gamecode.
  // Initialiser controlleren
  socket.emit ("tilsluttet", {});
  // Start spillet
  socketcodes [Device.Gamecode] .EMit ("tilsluttet", {});
}

Når forbindelsen er alt, vil vi give 8-ball et lille tryk fra X og Z med følgende kommando ...

 BALL  .SETLINEARVELOCITY (ny tre.Vector3 (30, 0, 30));

04. Sende data

Nu da forbindelsen er etableret, ønsker vi at sende Gyro- og Accelerometer-variablerne til spillet. Ved at bruge vindue.ondevicemotion. og vindue.ondeviceorientering Begivenheder, vi har de data, vi har brug for til at efterligne de samme tiltbevægelser af vores telefon til poolbordet. Jeg har valgt at bruge et interval på 100ms til at udsende disse værdier.

setinterval (funktion () {
  socket.emit ('send gyro', [math.round (roty), math.round (rotx), ay, ax]);
}, intervaltid);

På klientsiden løser vi latensen ved at tweening af de indkommende værdier fra serveren til tiltning af poolbordet. For tweening vi bruger Tweenmax. .

 // HANDLE INCOMING GYRO DATA
socket.on ('ny gyro', funktion (data) {
  VAR DEGY = DATA  & LT; 0? Math.abs (data ): -Data ;
  Tweenmax.to (tabel.rotation, 0,3, {
    X: DEGTORAD (DEGY - 90),
    Y: DEGTORAD (DATA ),
    Let: lineær.esenone,
    ONUPDATE: FUNKTION () {
        bord .__ DirtyRotation = TRUE;
    }
  });
});

05. Ekstra arrangementer.

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile — Flere bolde er lig med mere sjov. Prøv at ramme mellemrumstasten eller trykke på skærmen på din mobil

For at give det lidt mere interaktivitet, har jeg tilføjet et par ekstra arrangementer for brugeren at lege med. Vi skal give brugeren mulighed for at tilføje ekstra bolde ved siden af 8-ball ved at bruge tallene på tastaturet.

En anden er at hoppe bordet opad. For dette kan du ramme mellemrummet. Men vi tilføjer også en trykhændelse på controllerenheden. Dette vil sende en begivenhed til poolbordet, som vil stige bordet og sende boldene op.

Først skal vi fange tastaturhændelserne ...

 // Opret bolde / slambord på mellemrumstasten
DOCUMENT.ADDEVENTLENTENER ('KeyDown', funktion (E) {
  hvis (e.keycode == 49) {// tast: 1
    buildball (1);
  } ellers hvis (e.keycode == 50) {// tast: 1
    buildball (2);
  } ellers hvis (e.keycode == 51) {// tast: 1
    buildball (3);
  } ellers hvis (e.keycode == 32) {// tast: mellemrumstasten
    bounetable ();
  }
});

Det buildball. Funktionen er den samme funktion, vi plejede at skabe kugle 8-ball. Vi bruger kun forskellige teksturer, der vil pakke kuglen. For at skubbe bordet op, giver vi bordet en opadgående bevægelse langs Y-aksen med denne kode ...

 bord.setlineArvelocity (ny tre.vector3 (0, 500, 0));

Konklusion.

Add more balls and see how much your browser can handle — Tilføj flere bolde og se, hvor meget din browser kan håndtere

Når du har et koncept til et spil eller noget andet, er det helt sandsynligt, at der er biblioteker derude, der kunne gøre dit liv lettere. Dette er en demo, der viser, hvordan dette kan fungere. Vi håber, at dette vil hjælpe med at gnistre nogle kreative ideer eller hjælpe dig med dit nuværende projekt. Se et live eksempel på spillet her , eller find det på Github. .

Denne artikel blev oprindeligt offentliggjort i udstedelse 300 af net , Verdens bedste magasin til professionelle webdesignere og udviklere. Køb problem 300. eller Abonner her .

Relaterede artikler:

Kom godt i gang med WebGL ved hjælp af Three.js
20 JavaScript værktøjer til at blæse dit sind
Opret interaktive 3D-visualer med tre.js

Byg dit eget WebGL Physics-spil

01. Heroku.

02. Byg fysik scenen

03. Sockets Connection.

03.1. Opsætning af skrivebordet spil

03.2. Tilslut controller til spillet

04. Sende data

05. Ekstra arrangementer.

Konklusion.

hvordan - Mest populære artikler

Sådan tegner du en ulv

10 måder at forbedre din 3D-anatomi

Sådan opretter du en fotorealistisk rumscene

Opret et multi-eksponeringsbillede med Adobe CC

belyser dit 3D-arbejde med kuppelygter

Sådan designer du en chatbot-oplevelse

Alt du behøver at vide om den nye node.js 8

Sådan opretter du en levende fairy dronning

Kategorier