Bygg ditt eget WebGL-fysikspel

Sep 12, 2025

Hur

Detta projekt kommer att delas upp i olika delar. Vi kommer att ge en kort introduktion till Heroku, visa hur man använder PHYSIJ med tre.js, förklara hur man hanterar uttagshändelser över node.js och också hur vi handlar om att hantera de skickade data.

20 fantastiska exempel på webgl i aktion

01. Heroku

Heroku is an easy to use and free to trial node.js web server — Heroku är en lättanvänd och gratis till provkörteln.js webbserver

Detta projekt kommer att vara värd på Heroku , som är en molnplattform för att vara värd för dina appar. Den har ett brett utbud av stödda språk som Ruby, Java, PHP och Python. Vi ska använda node.js.

Registrera dig för ett konto och välj Node.js. För det här projektet kan vi använda den grundläggande servern, som är gratis. Efter registrering kommer du till din instrumentbräda där du kan skapa din app. Detta kommer att skapa en underdomän på Herokuapp.com.

Som en distribueringsmetod kan du välja att antingen använda Heroku Command Line-gränssnittet (CLI) för att distribuera med hjälp av sitt GIT-förråd, eller ha en anslutning som är inställd på GitHub eller Dropbox. Jag har valt att gå med sin cli; Detta kommer att kräva en installation. Men i gengäld får du en mängd nya användbara verktyg, en av dessa är live debugging via din terminal.

För att konfigurera din server rekommenderar jag att du följer stegen Som beskrivs här .

För att distribuera använder du standard git-kommandon. Var och en du använder kommer att utlösa byggservern och din app kommer att distribueras till Heroku-servern och ses sedan på din underdomän.

När koden är utplacerad kan du se ditt projekt på [YourProject] .HEROKUAPP.com. För att visa loggarna använder du kommandot "Heroku Logs - Tail" i din terminal. Några av de saker som visas är vad som serveras till kunden - det visar socketanslutningarna, och om du vill felsöka din kod kan du också använda konsolen. Log för att mata ut till terminalen.

02. Bygg fysikscenen

Tap your screen or hit the spacebar to bounce the table up — Tryck på skärmen eller slå mellanslagstangenten för att studsa bordet

Vi kommer att använda den mest populära Webgl ramverk, tre.js , för att bygga en 3D-scen som innehåller ett föremål som vi lägger till fysik. Fysikbiblioteket av valet är Physijs , en plug-in för tre.js. Som en förlängning till tre.js använder Physijs samma kodningskonvention, vilket gör det lättare att använda om du redan är bekant med tre.js.

Det första är biljardbordet. Vi använder PHYSIJS Höjdfieldmesh , eftersom det här nätet kommer att läsa höjden från planeGeenometrin. Så det kommer i princip att fälla sig runt det tre.js-objektet.

 Var-kartongometri = Ny tre.PlaneGeometri (650, 500, 10, 10);
VAR TableMaterial = Physijs.CreateMaterial (
  ny tre.meshphongmaterial ({
    Shininess: 1,
    Färg: 0xB00000,
    Emissiv: 0x111111,
    Sida: tre.doubleside
  }),
  .8, // friktion
  .4 // Återbetalning
);
TABLE = NEW Physijs.Heightfieldmesh (postgeometri, tableMaterial, 0);

Så Höjdfieldmesh kräver en geometri men också ett fysiskt material. Vi lägger till två nya funktioner till det tre.js-materialet. Det är de friktion och återbetalning variabler. Friktion är motståndet som objektet gör, och återbetalning avser "bouncess". Dessa två variabler definierar hur verkligt fysiken kommer att känna sig som i din scen.

För de skapade poolbollarna vill vi inte göra dem för hoppande, så håll numret lågt. Liksom tre.js har Physijs också en serie grundläggande former för att gå runt det ursprungliga nätet. Sfärär förpackning Sfär kommer att ge bollfysiken. När du initierar scenen ringer vi Buildball (8) , som kommer att utlösa följande funktion ...

 var buildball = funktion (nummerball) {
 var balltexture = ny tre.texture ();
 var ballindex = ball.length;

Lägg till texturen:

 balltexture = tre.imageutils.LoadTexture ('Textures /' + Numberball + '_Ball.jpg', funktion (bild) {
     balltexture.image = bild;
  });

Skapa det fysiska-aktiverade materialet med några anständiga friktions- och studsegenskaper:

Var ballmaterial = Physijs.createMaterial (
    ny tre.meshlambertmaterial ({
      Karta: Balltexture,
      Shininess: 10,
      Färg: 0xdddddd,
      Emissiv: 0x111111,
      sida: tre.frontside
    }),
    .6, // friktion
    .5 // Återbetalning
  );

Textur Mapping:

 ballmaterial.map.wrraps = ballmaterial.map.wrapa = tre.repeatwrapping;
  ballmaterial.map.Repeat.set (1, 1);
 Skapa den fysik-aktiverade Spheremesh, och starta upp det i luften:

  Ball [Ballindex] = Ny Physijs.Spheremesh (
    Ny tre.SphereGeometri (25, 25, 25),
    ballmaterial,
    100
  );
  // y offset till toppen av duken
  boll [ballindex] .position.y = 500;
  // skuggor
  boll [ballindex] .receiveshadow = sant;
  boll [ballindex] .castshadow = sant;
  // Lägg bollen på din duk
  scene.add (boll [ballindex]);
};

Vi lägger till textur från en .jpg-fil. Skapa materialet och använd det för Sfärär För att skapa objektet, som vi ska placera vertikalt till toppen så det faller in på skärmen.

03. Socketsanslutning

The key goal of our game is emulating the physical movements to the screen — Det viktigaste målet med vårt spel emulerar de fysiska rörelserna på skärmen

För kommunikation mellan servern och klienten, kommer vi att använda socket.io . Detta är ett av de mest pålitliga bibliotek som finns tillgängliga för node.js. Det är byggt ovanpå Websockets API.

Nu är fysiken aktiverad för de maskor vi behöver användarinmatning för att göra spelet interaktivt. Den inmatningsenhet som vi använder är den mobila enheten. Den mobila webbläsaren är den regulator som kommer att ge data från accelerometern och gyroskopet till skrivbordet där du kommer att se spelet.

Först och en anslutning mellan mobilbläddraren och skrivbordsbrowser måste göras. Varje gång en webbläsare ansluts med vår Node.js-app, måste vi göra en ny anslutning. En klientsidans anslutning är upprättad genom att använda följande:

 var socket = io.connect ();

För att skicka meddelanden använder du avge fungera:

 socket.emit ("händelse namn", data);

Och för att ta emot dig använder du .på() fungera:

 socket.on ("händelse namn", funktion () {});

03.1. Ställa in skrivbordet

Om vi är på ett skrivbord skickar vi våra socklar en enhet som avger att vår server skrivbordet är spelet med följande kod:

 var socket = io.connect ();
// När det första välkomstmeddelandet svarar med "spel" -enhetstyp
socket.on ('Welcome', Function (Data) {
  socket.emit ("enhet", {"typ": "spel"});
});

Servern kommer att returnera oss en unik nyckel / spelkod genererad av krypto . Detta kommer att visas till skrivbordet.

 // generera en kod
var gamecode = crypto.randombytes (3) .tosstring ('hex'). Substring (0, 4) .tolowercase ();
// säkerställa unikhet
medan (gamecode i socketcodes) {
  gamecode = crypto.randombytes (3) .tostrering ('hex'). Substring (0, 4) .tolowercase ();
}
// Store spelkod - och GT; socketförening
socketcodes [gamecode] = io.sockets.sockets [socket.id];
socket.gamecode = gamecode

Berätta för spelklienten att initialisera och visa spelkoden till användaren ...

 socket.emit ("Initialize", GameCode);

03.2. Anslut styrenheten till spelet

För att ansluta mobilenheten till spelet, använder vi ett formulär för att skicka in spelkoden från skrivbordsskärmen. På formuläret skickar vi spelkoden till servern för autentisering.

 socket.emit ("Device", {"Type": "Controller", "GameCode": GameCode});

Servern kommer att kontrollera om spelkoden är giltig och kommer att ställa in anslutningen med skrivbordsspelet

 Om (Device.GameCode i socketcodes) {
  // Spara spelkoden för Controller-kommandon
  Socket.GameCode = Device.GameCode
  // Initiera regulatorn
  socket.emit ("ansluten", {});
  // starta spelet
  socketcodes [Device.GameCode] .emit ("ansluten", {});
}

När anslutningen är upptagen, kommer vi då att ge 8-bollen ett litet tryck från X och Z med följande kommando ...

 Ball  .setlinearVelocity (New Three.Vector3 (30, 0, 30));

04. Skicka data

Nu när anslutningen är etablerad vill vi skicka Gyro och accelerometervariablerna till spelet. Genom att använda fönster.ondevicemotion och den fönster.ondeviceorientation Händelser, vi har de data vi behöver för att efterlikna samma lutningsrörelser i vår telefon till biljardbordet. Jag har valt att använda ett intervall på 100ms för att avge dessa värden.

SetInterval (funktion () {
  socket.emit ('skicka gyro', [math.round (roty), math.round (rotx), ay, ax]);
}, intervalltid);

På klientsidan kommer vi att lösa latensen genom att traffa de inkommande värdena från servern till lutningen på biljardbordet. För tweening använder vi Tweenmax .

 // hantera inkommande gyrodata
socket.on ('new gyro', funktion (data) {
  VAR DEGY = DATA  & LT; 0? Math.abs (data ): -Data ;
  Tweenmax.to (table.rotation, 0,3, {
    X: Degtorad (Degy - 90),
    Y: Degtorad (data ),
    Lätt: Linjär. Enstone,
    OnUpdate: FUNCTION () {
        Tabell .__ DirtyRotation = True;
    }
  });
});

05. Extra händelser

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile — Fler bollar är lika roliga. Försök slå på mellanslagstangenten eller knacka på skärmen på din mobil

För att ge det lite mer interaktivitet har jag lagt till ett par extra händelser för användaren att leka med. Vi ska ge användaren möjlighet att lägga till extra bollar bredvid 8-bollen genom att använda siffrorna på tangentbordet.

En annan är att studsa bordet uppåt. För detta kan du slå mellanslagstangenten. Men vi lägger också till en kranhändelse på styrenheten. Detta skickar en händelse till biljardbordet, vilket kommer att stiga bordet och skicka bollarna upp.

Först måste vi fånga tangentbordshändelserna ...

 // skapa bollar / slambord på mellanslag
document.addeventlistener ('Keydown', funktion (e) {
  Om (e.keycode == 49) {//-nyckel: 1
    buildball (1);
  } annars om (e.keycode == 50) {// tangent: 1
    buildball (2);
  } annars om (e.keycode == 51) {// tangent: 1
    buildball (3);
  } annars om (e.keycode == 32) {// tangent: mellanslagstangent
    Bouncetable ();
  }
});

De buildball Funktionen är samma funktion som vi använde för att skapa sfären 8-bollen. Vi använder bara olika texturer som kommer att fälla sfären. För att trycka på bordet upp, ger vi bordet en uppåtgående rörelse längs Y-axeln med den här koden ...

 Tabell.SetlinearVelocity (New Three.Vector3 (0, 500, 0));

Slutsats

Add more balls and see how much your browser can handle — Lägg till fler bollar och se hur mycket din webbläsare kan hantera

När du har ett koncept för ett spel eller något annat är det helt troligt att det finns bibliotek där ute som kan göra ditt liv enklare. Det här är en demo som visar hur det här kan fungera. Vi hoppas att det här hjälper till att gnista några kreativa idéer eller hjälpa dig med ditt nuvarande projekt. Se ett levande exempel på spelet här , eller hitta den på Github .

Denna artikel publicerades ursprungligen i utgåva 300 av netto , världens toppmagasin för professionella webbdesigners och utvecklare. Köp utgåva 300 eller prenumerera här .

Relaterade artiklar:

Kom igång med WebGL med tre.js
20 Javascript-verktyg för att blåsa ditt sinne
Skapa interaktiva 3D-bilder med tre.js

Bygg ditt eget WebGL-fysikspel

01. Heroku

02. Bygg fysikscenen

03. Socketsanslutning

03.1. Ställa in skrivbordet

03.2. Anslut styrenheten till spelet

04. Skicka data

05. Extra händelser

Slutsats

Hur - Mest populära artiklar

Google Slides: Hur man utformar ett dokument

8 Gyllene regler för mobil design

Kom igång med express.js

Få ditt huvud reagera med dessa fem faktorer

Skapa en vektorförskjutningsmaskborste

Bygga appar som fungerar offline

Hur man målar en zombie i klippstudiofärg

Hur man utformar ett bokomslag i InDesign

Kategorier