Costruisci il tuo gioco di fisica WebGL

Sep 13, 2025

Come si fa

Questo progetto sarà suddiviso in diverse parti. Daremo una breve introduzione a Heroku, mostrare come usare Physys con tre.js, spiegare come gestire gli eventi socket su node.js e anche come andiamo a gestire i dati inviati.

20 incredibili esempi di WebGL in azione

01. Heroku.

Heroku is an easy to use and free to trial node.js web server — HEROKU è un server web facile da usare e facile da usare per Trial.

Questo progetto sarà ospitato Heroku. , qual è una piattaforma cloud per ospitare le tue app. Ha una vasta gamma di lingue supportate come Ruby, Java, PHP e Python. Useremo Node.js.

Iscriviti per un account e scegli Node.js. Per questo progetto possiamo utilizzare il server di base, che è gratuito. Dopo la registrazione verrai nella tua dashboard dove puoi creare la tua app. Questo creerà un sottodominio su herokuapp.com.

Come metodo di implementazione, è possibile scegliere di utilizzare l'interfaccia della riga di comando Heroku (CLI) da distribuire utilizzando il suo repository Git o avere una connessione impostata su GitHub o Dropbox. Ho scelto di andare con la sua cli; Questo richiederà un'installazione. Ma in cambio si ottiene una varietà di nuovi strumenti utili, uno di questi è il debug dal vivo attraverso il terminale.

Per la configurazione del server, consiglio di seguire i passaggi Come descritto qui .

Per distribuire, utilizzare i comandi Git predefiniti. Ognuno che usi si attiverà il server Build e la tua app verrà distribuita sul server Heroku e quindi essere visualizzabile al sottodominio.

Una volta implementato il codice, è possibile visualizzare il tuo progetto su [YourProject] .herokuapp.com. Per visualizzare i registri utilizzano il comando 'Heroku Logs - Tail' nel terminale. Alcune delle cose che vengono mostrate è ciò che viene servito nel client - mostra le connessioni socket e, se si desidera eseguire il debug del codice, è possibile utilizzare anche la console.log per emettere al terminale.

02. Costruisci la scena della fisica

Tap your screen or hit the spacebar to bounce the table up — Tocca lo schermo o colpisci la barra spaziatrice per rimbalzare la tavola

Usereremo il più popolare Webgl. struttura, tre.js. , costruire una scena 3D contenente un oggetto su cui attaccheremo la fisica. La libreria di fisica della scelta è PSIJS. , un plug-in per tre.js. Come estensione a tre.JS, Physys utilizza la stessa convenzione di codifica, rendendo più facile da usare se hai già familiarità con tre.js.

La prima cosa è il tavolo da biliardo. Stiamo usando il Physys Altezzafieldmesh. , perché questa maglia leggerà l'altezza dall'interrenagna. Quindi, fondamentalmente si avvolgerà attorno all'oggetto dei tre.js.

 var tablegeometry = nuovo tre.planegeometry (650, 500, 10, 10);
VAR Tablematerial = Physyjs.CreateMateriale (
  Nuovo tre.MeshHphonGMateriale ({
    Shininess: 1,
    Colore: 0xb00000,
    Emissivo: 0x111111,
    lato: tre.Dobleside.
  }),
  .8, // Attrito
  .4 // restituzione
);
Tabella = New Physjs.HeightfieldmeshSh (TableGometry, Tablematerial, 0);

Così Altezzafieldmesh. Richiede una geometria ma anche un materiale Physjs. Stiamo aggiungendo due nuove funzionalità al materiale Three.js. Quelli sono The. attrito e restituzione variabili. L'attrito è la resistenza che l'oggetto fa e la restituzione si riferisce alla "buttafugazione". Queste due variabili definiscono quanto reale la fisica si sentirà nella tua scena.

Per le palline da piscina creato non vogliamo renderle troppo rimbalzante, quindi mantieni il numero basso. Come tre.JS, Physys ha anche una serie di forme di base per aggirare la rete originale. Spere avvolgendo il Sferageometria Darà la fisica della palla. Quando inizializza la scena, chiamiamo buildball (8) , che innegerrà la seguente funzione ...

 var buildball = funzione (numeroball) {
 var balltexture = nuovo tre.Texture ();
 var ballindex = ball.length;

Aggiungi la trama:

 BallTexture = tre.Imageutils.loadTexture ('Textures /' + Numberball + '_ball.jpg', funzione (immagine) {
     BallTexture.Image = immagine;
  }););

Creare il materiale abilitato da Physijs con alcune proprietà di attrito e rimbalzo decenti:

var ballmaterial = Physyjs.creatematerial (
    Nuovo tre.SheshlamberTtmateriale ({
      Mappa: BallTexture,
      Shininess: 10,
      Colore: 0xDDDDDD,
      Emissivo: 0x111111,
      Side: tre.Frontside.
    }),
    .6, // attrito
    .5 // restituzione
  );

Mappatura della trama:

 ballmaterial.map.wraps = ballmaterial.map.wript = tre.repeatwrapping;
  ballmaterial.map.repeat.set (1, 1);
 Creare la sfera della fisica abilitata e avvialo nell'aria:

  Ball [Ballandex] = New Physjs.speremesh (
    Nuovo tre.Vheregeometry (25, 25, 25),
    Manaterial,
    100.
  );
  // o offset alla cima della tela
  palla [ballindex] .position.y = 500;
  // ombre
  palla [ballindex] .receiveshadow = true;
  Ball [Ballandex] .castshadow = true;
  // Aggiungi la palla alla tua tela
  Scena.add (Ball [Balindex]);
};;

Stiamo aggiungendo texture da un file .jpg. Creare il materiale e usa quello per il Spere Per creare l'oggetto, che porteremo verticalmente in alto in modo che scende sullo schermo.

03. Collegamento prese.

The key goal of our game is emulating the physical movements to the screen — L'obiettivo chiave del nostro gioco sta emulando i movimenti fisici allo schermo

Per la comunicazione tra il server e il client, utilizzeremo presa . Questa è una delle librerie più affidabili disponibili per Node.js. È costruito in cima all'API di WebSechets.

Ora la fisica è abilitata per le maglie che abbiamo bisogno di input dell'utente per rendere il gioco interattivo. Il dispositivo di input che stiamo utilizzando è il dispositivo mobile. Il browser mobile è il controller che fornirà i dati Dall'accelerometro e dal giroscopio al desktop dove vedrai il gioco.

Prima di tutto, deve essere effettuata una connessione tra il browser mobile e il browser desktop. Ogni volta che un browser si connette con la nostra app Node.js, dobbiamo fare una nuova connessione. Una connessione laterale client è impostata utilizzando quanto segue:

 Socket VAR = IO.Connect ();

Per l'invio di messaggi usi il emettere funzione:

 socket.emit ('nome evento', dati);

E per ricevere utili il .su() funzione:

 socket.on ('nome evento', funzione () {});

03.1. Impostazione del gioco desktop

Se siamo su un desktop invieremo le nostre prese un dispositivo Emit Deading del nostro server Il desktop è il gioco utilizzando la seguente riga di codice:

 Socket VAR = IO.Connect ();
// Quando il messaggio di benvenuto iniziale, rispondi con il tipo di dispositivo 'gioco'
socket.on ('Benvenuto', funzione (dati) {
  socket.emit ("dispositivo", {"tipo": "gioco"});
});

Il server ci restituirà un codice chiave / gioco unico Generato da Crypto. . Questo verrà visualizzato sul desktop.

 // Genera un codice
var gamecode = crypto.randombytes (3) .tostring ('hex'). sottostringa (0, 4) .toolerase ();
// Garantire unicità
while (gamecode in socketcodes) {
  gamecode = crypto.randombytes (3) .tostring ('hex'). Supplesstring (0, 4) .toolerase ();
}
// Negozio codice gioco - & GT; Associazione socket.
socketcodes [gamecode] = io.sochets.sochets [socket.id];
socket.gamecode = gamecode

Dillo a Game Client di inizializzare e mostrare il codice del gioco all'utente ...

 socket.emit ("Inizializza", Gamecode);

03.2. Connetti il controller al gioco

Per collegare il dispositivo mobile al gioco, utilizzeremo un modulo per inviare il codice di gioco dallo schermo del desktop. Sulla forma inviare invieremo il codice di gioco al server per l'autenticazione.

 socket.emit ("dispositivo", {"Tipo": "Controller", "GameCode": GameCode});

Il server controllerà se il codice del gioco è valido e configurerà la connessione con il gioco desktop

 IF (dispositivo.Gamecode in socketcodes) {
  // Salva il codice del gioco per i comandi del controller
  socket.gamecode = dispositivo.Gamecode.
  // Inizializza il controller
  socket.emit ("connesso", {});
  // inizia il gioco
  socketcodes [device.gamecode] .emit ("connesso", {});
}

Una volta che la connessione è impostata, daremo quindi l'8-Ball una piccola spinta dalla X e Z con il seguente comando ...

 Ball  .setlinearvelocità (nuovo tre.Vector3 (30, 0, 30));

04. Invio di dati

Ora che la connessione è stabilita, vogliamo inviare le variabili di Gyro e accelerometro al gioco. Usando il. finestra.ondevicemotion. e il finestra.ondeviceorientamento Eventi, abbiamo i dati che abbiamo bisogno di emulare gli stessi movimenti di inclinazione del nostro telefono al tavolo da biliardo. Ho scelto di usare un intervallo di 100 ms per emettere tali valori.

setinterval (funzione () {
  socket.emit ('Invia Gyro', [Math.Round (Roty), Math.Round (ROTX), AY, AX]);
}, intervallo);

Sul lato client risolveremo la latenza trattenendo i valori in ingresso dal server all'inclinazione del tavolo da biliardo. Per cimatura usiamo Tweenmax. .

 // Maniglia i dati del Gyro in arrivo
socket.on ('nuovo Gyro', funzione (dati) {
  var degy = dati  & lt; 0? Math.abs (dati ): -Data ;
  Tweenmax.to (table.rotazione, 0,3, {
    X: DEGTORAD (DEGY - 90),
    Y: DEGTORAD (dati ),
    Facilità: lineare.asenone,
    OnUpdate: funzione () {
        Tabella .__ dirtyrotazione = true;
    }
  }););
});

05. Eventi extra.

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile — Più palle equivalgono a più divertimento. Prova a colpire la barra spaziatrice o toccando lo schermo del tuo cellulare

Per dargli un po 'più interattività, ho aggiunto un paio di eventi extra per l'utente con cui giocare. Daremo all'utente l'opzione di aggiungere palle aggiuntive accanto alla palla da 8 utilizzando i numeri sulla tastiera.

Un altro è quello di rimbalzare il tavolo verso l'alto. Per questo puoi colpire la barra spaziatrice. Ma aggiungiamo anche un evento Tap sul dispositivo del controller. Ciò invierà un evento al tavolo da biliardo, che salirà il tavolo e invierà le palle.

Per prima cosa abbiamo bisogno di prendere gli eventi della tastiera ...

 // Creare palline / tavolo SLAM sulla barra spaziatrice
Document.AdDeventListener ('Keydown', Function (E) {
  IF (E.KEYCODE == 49) {// chiave: 1
    buildball (1);
  } Else se (e.keyCode == 50) {// chiave: 1
    buildball (2);
  } Else se (e.keyCode == 51) {// chiave: 1
    buildball (3);
  } Else se (e.keyCode == 32) {// chiave: barra spaziatrice
    Bouncetable ();
  }
});

Il buildball. La funzione è la stessa funzione che abbiamo usato per creare la sfera 8-palla. Stiamo solo usando diverse trame che avvolgeranno la sfera. Per spingere il tavolo, diamo al tavolo un movimento verso l'alto lungo l'asse Y con questo codice ...

 tabella.setlinearvelocità (nuovo tre.Vector3 (0, 500, 0));

Conclusione

Add more balls and see how much your browser can handle — Aggiungi più palline e vedi quanto il tuo browser può gestire

Quando hai un concetto per un gioco o qualsiasi altra cosa, è del tutto probabile che ci siano biblioteche là fuori che potrebbero rendere la tua vita più facile. Questa è una demo che mostra come questo può funzionare. Speriamo che questo aiuterà a suscitare alcune idee creative o ti aiuteranno con il tuo attuale progetto. Vedi un esempio dal vivo del gioco Qui o trovarlo Github. .

Questo articolo è stato originariamente pubblicato in emissione 300 di netto , la rivista principale del mondo per i web designer e sviluppatori professionisti. Acquista il problema 300. o Iscriviti qui .

Articoli Correlati:

Inizia con WebGL usando tre.js
20 strumenti JavaScript per soffiare la tua mente
Creare immagini 3D interattive con tre.js

Costruisci il tuo gioco di fisica WebGL

01. Heroku.

02. Costruisci la scena della fisica

03. Collegamento prese.

03.1. Impostazione del gioco desktop

03.2. Connetti il controller al gioco

04. Invio di dati

05. Eventi extra.

Conclusione

Come si fa - Articoli più popolari

Tutorial di Krita: impara le basi del software Digital Art

Crea il tuo pennello calligrafico in Illustrator

Controllo della versione principale per team remoti

Come creare un'app dashboard con react

Come creare un'opera d'arte stilizzata

Come aggiungere video a PDF interattivi

Dipingi un ritratto come van Gogh

Affila le tue abilità di pittura di still life

Categorie

Costruisci il tuo gioco di fisica WebGL

01. Heroku.

02. Costruisci la scena della fisica

03. Collegamento prese.

03.1. Impostazione del gioco desktop

03.2. Connetti il ​​controller al gioco

04. Invio di dati

05. Eventi extra.

Conclusione

Come si fa - Articoli più popolari

Categorie

03.2. Connetti il controller al gioco