Sestavte si vlastní hru WebGL Fyzika

Feb 3, 2026
jak

Tento projekt bude rozdělen do různých částí. Dáme krátký úvod do Heroku, ukázat, jak používat Physijs s Three.js, vysvětlete, jak zvládnout události soketu nad node.js a také jak jdeme o manipulaci s odeslanými daty.

  • 20 Úžasné příklady WebGL v akci

01. Heroku.

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

Heroku je snadno ovladatelný a zdarma na zkušební node.js webový server

Tento projekt bude hostován Heroku. , což je platforma Cloud pro hostování vašich aplikací. Má širokou škálu podporovaných jazyků, jako je Ruby, Java, PHP a Python. Použijeme node.js.

Zaregistrujte se pro účet a vyberte možnost UnLe.js. Pro tento projekt můžeme použít základní server, který je zdarma. Po registraci přijdete na přístrojovou desku, kde můžete vytvořit aplikaci. To vytvoří subdoménu v Herokuapp.com.

Jako metoda nasazení můžete zvolit buď použít rozhraní příkazového řádku Heroku (CLI) pro nasazení pomocí úložiště GIT, nebo mít připojení k sadě do GitHub nebo Dropbox. Rozhodl jsem se jít s jeho CLI; To bude vyžadovat instalaci. Ale na oplátku dostanete různé nové užitečné nástroje, jeden z nich je živý ladění prostřednictvím vašeho terminálu.

Pro nastavení serveru doporučuji podle kroků Jak je zde popsáno .

Chcete-li nasadit používat výchozí příkazy GIT. Každý, kdo používáte, spustí server sestavení a vaše aplikace bude nasazena na server Herokuu a pak se můžete zobrazit ve vašem subdoménu.

Jakmile je kód nasazen, můžete zobrazit projekt na [Yourproject] .Herokuapp.com. Chcete-li zobrazit protokoly, použijte příkaz "Heroku protokoly - ocas" ve vašem terminálu. Některé z těch, které jsou uvedeny, je to, co se podává klientovi - zobrazuje připojení soketu, a pokud chcete svůj kód ladit, můžete také použít konzolu.log, abyste mohli výstup do terminálu.

02. Vybudujte scénu fyziky

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

Klepněte na obrazovku nebo stiskněte mezní panel, abyste se odrazili

Budeme používat nejoblíbenější Webgl. rámec, Three.js. , vybudovat 3D scénu obsahující objekt, na kterém připojíme fyziku. Fyzikální knihovna je Physijs. , plug-in pro tři.js. Jako rozšíření na tři.js, Physijs používá stejnou konvenci kódování, což usnadňuje použití, pokud jste již obeznámeni s Three.js.

První věc je tabulka bazénu. Používáme physijs Heightfieldmesh. , protože tato síť bude číst výšku z havadry. Takže to bude v podstatě zabalit kolem objektu tří.js. 

 varlegetry = nová tři.plangeometrie (650, 500, 10, 10);
var taberial = fyzijs.CreateMaterial (
  nové tři.meshphongmaterial ({
    Shinnost: 1,
    Barva: 0xb00000,
    Emisivní: 0x111111,
    strana: tři.doubleside.
  }),
  .8, // tření
  .4 // restituce
);
Tabulka = New Phys.HeightFieldShiesmesh (Stolybrory, tableriální, 0);

Tak Heightfieldmesh. vyžaduje geometrii, ale také materiál fyzijiny. Přidáváme dva nové funkce do tří.js materiálu. To jsou tření a restituce proměnné. Tření je odpor, který objekt dělá, a restituce se týká "skákací". Tyto dvě proměnné definují, jak skutečná fyzika bude mít ve své scéně.

Pro vytvořené kuličkové koule nechceme, aby je příliš skákací, tak udržet číslo číslo. Stejně jako tři.Js, Physijs má také řadu základních tvarů, které by mohly jít kolem originální sítě. Spheremesh. balení Spergeometrie. dá fyziku míče. Při inicializaci scény voláme Buildball (8) , který spustí následující funkce ... 

 var staveball = funkce (číslicováball) {
 var ballterture = nové tři.texture ();
 var ballindex = míč.length;

Přidat texturu: 

 BallTexture = tři.
     BallTexture.Image = obraz;
  });

Vytvořit materiál s podporou fyzií s některými slušnými třením a odrazem vlastností: 

var ballmaterial = phys.CreateMaterial (
    nové tři.meshlambertmaterial ({
      Mapa: BallTexture,
      Shinnost: 10,
      Barva: 0xdddddd,
      Emisivní: 0x111111,
      strana: tři.frontside.
    }),
    .6, // tření
    .5 // restituce
  );

Mapování textury: 

 ballmaterial.map.wraps = ballmaterial.map.wrapt = tři.Repeatwrapping;
  BallMaterial.map.repeat.set (1, 1);
 Vytvořte spheremoš s fyzikou a spusťte jej ve vzduchu:

  míč [Ballindex] = New PhysiJs.Spheremoš (
    nové tři.Spheregeometrie (25, 25, 25),
    balzateriál,
    100
  );
  // y Posunutý na vrchol plátna
  míč [Ballindex] .pozice.y = 500;
  // stíny
  míč [Ballindex] .Receiveshadow = true;
  míč [Ballindex] .castshadow = true;
  // přidejte míč na plátno
  scene.add (míč [Ballindex]);
};

Přidáváme texturu ze souboru .jpg. Vytvořit materiál a použít to pro Spheremesh. Chcete-li vytvořit objekt, který umístíme vertikálně na vrchol, takže klesne na obrazovku.

03. Spojení soketů

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

Klíčovým cílem naší hry emuluje fyzické pohyby na obrazovku

Pro komunikaci mezi serverem a klientem budeme používat Socket.io. . To je jeden z nejspolehlivějších knihoven dostupných pro UnERE.JS. Je postaven na vrcholu WebSockets API.

Fyzika je nyní povolena pro ty, které potřebujeme uživatelský vstup, aby se hru interaktivní. Vstupní zařízení používáme, je mobilní zařízení. Mobilní prohlížeč je regulátor, který bude poskytovat data z akcelerometru a gyroskopu na pracovní plochu, kde se podíváte na hru.

Nejprve musí být provedeno spojení mezi mobilním prohlížečem a prohlížečem stolního počítače. Pokaždé, když prohlížeč se připojuje k naší aplikaci Node.js, musíme vytvořit nové připojení. Připojení klienta je nastaveno pomocí následujících možností: 

 var socket = io.connect ();

Pro odeslání zpráv používáte vysílat funkce: 

 Socket.emit (název akce ', data);

A pro příjem používáte .na() funkce: 

 Socket.on (název události ', funkce () {});

03.1. Nastavení pracovní hry

Pokud jsme na pracovní ploše, zašleme naše zásuvky zařízení emitovat vyprávění našeho serveru Desktop je hra pomocí následujícího řádku kódu: 

 var socket = io.connect ();
// Když počáteční uvítací zpráva, odpověď s typem "hry"
Socket.on ('Vítejte', funkce (data) {
  Socket.emit ("zařízení", {"typ": "Hra"});
});

Server nás vrátí jedinečný klíčový kódový kód generován Crypto. . To se zobrazí na pracovní ploše. 

 // generovat kód
var gamecode = crypto.randombytes (3) .tostring ('hex'). Substring (0, 4) .tolowercase ();
// zajistit jedinečnost
zatímco (gamecode v socketcodes) {
  gamecode = crypto.randombytes (3) .tostring ('hex'). Substring (0, 4) .tolowercase ();
}
// Store herní kód - & gt; Socket Sdružení
Socketcodes [GameCode] = io.Sockets.Sockets [Socket.id];
socket.gamecode = gamecode

Řekněte hru Client inicializovat a zobrazit herní kód uživateli ... 

 Socket.emit ("Inicializace", gamecode);

03.2. Připojte regulátor do hry

Pro připojení mobilního zařízení do hry použijeme formulář pro odeslání hernímu kódu z obrazovky plochy. Ve formuláři odesíláme datový kód na server pro ověřování. 

 Socket.emit ("zařízení", {"typ": "regulátor", "gamecode": gamecode});

Server bude zkontrolovat, zda je herní kód platný a nastaví spojení s hrubou stolní počítače 

 Pokud (zařízení.gamecode v zásuvkách) {
  // Uložte herní kód pro příkazy regulátoru
  socket.gamecode = device.gamecode.
  // inicializovat regulátor
  Socket.emit ("připojen", {});
  // spustit hru
  Socketcodes [zařízení.gamecode] .Oit ("připojeno", {});
}

Jakmile je spojení všechna nastavena, pak budeme dávat 8-ball malý push z X a Z s následujícím příkazem ... 

 míč 
 .Setlinearvelocity (nové tři.vector3 (30, 0, 30));

04. Odesílání dat

Nyní, když je spojení založeno, chceme poslat gyro a akcelerometrové proměnné do hry. Pomocí window.ondevicemotion. a. window.ondeviceorientation. Události, máme data, kterou potřebujeme napodobovat stejné pohyby náklonu našeho telefonu do kulečního stolu. Rozhodl jsem se použít interval 100ms pro vydání těchto hodnot. 

setInterval (funkce () {
  Socket.emit ('Poslat Gyro', [Math.round (Roty), math.round (ROTX), AY, AX]);
}, intervalu);

Na straně klienta vyřeší latenci tím, že doplneme příchozí hodnoty ze serveru do naklonění tabulky fondu. Pro doplňování používáme Tweenmax. . 

 // Zacházejte s příchozími daty GYRO
Socket.on ('New Gyro', funkce (data) {
  var degy = data 
 < 0? Math.Abs ​​(data 
): -Data 
;
  Tweenmax.to (tabulka.rotation, 0,3, {
    X: DEGTORAD (DEGY - 90),
    Y: DEGTORAD (data 
),
    Snadné: Linear.easenone,
    OnUpdate: Funkce () {
        Tabulka .__ DirtyRotation = TRUE;
    }
  });
});

05. Extra události

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

Další míče se rovná více zábavy. Zkuste stisknout mezerník nebo klepnutím na obrazovku svého mobilu

Chcete-li to trochu více interaktivity, přidal jsem pár dalších akcí pro uživatele hrát. Dáte uživateli možnost přidat další míče vedle 8-míče pomocí čísel na klávesnici.

Další je odrazit tabulka nahoru. Pro to můžete zasáhnout mezerník. Ale přidáváme také událost Tap na regulátoru. To bude posílat událost do tabulky bazénu, která bude stoupat stůl a poslat míče nahoru.

Nejdříve musíme chytit události klávesnice ... 

 // Vytvořit míče / slam stůl na mezerník
Document.AddeventListener ('Keydown', funkce (e) {
  Pokud (e.keycode == 49) {// klíč: 1
    buildball (1);
  } Jinak Pokud (e.keycode == 50) {// klíč: 1
    budování (2);
  } Jinak Pokud (e.Keycode == 51) {// klíč: 1
    budování (3);
  } Jinak Pokud (E.KeyCode == 32) {// klíč: mezerník
    sankcietable ();
  }
});

. \ T budování Funkce je stejná funkce, kterou jsme použili k vytvoření koule 8-míč. Právě používáme různé textury, které zabalí sféru. Pro tlačení stolu dáváme stůl vzhůru pohybu podél osy y s tímto kódem ... 

 Tabulka.SetlineArvelocity (nové tři.vector3 (0, 500, 0));

Závěr

Add more balls and see how much your browser can handle

Přidejte další míče a uvidíte, kolik může váš prohlížeč zvládnout

Když máte koncept pro hru nebo cokoliv jiného, ​​je zcela pravděpodobné, že existují knihovny, které by mohlo usnadnit váš život. Toto je demo, které ukazuje, jak to může fungovat. Doufáme, že to pomůže jiskřit některé kreativní nápady nebo vám pomůže s vaším současným projektem. Podívejte se na živého příkladu hry tady nebo ho najít Github. .

Tento článek byl původně publikován v čísle 300 síť Světový špičkový časopis pro profesionální web designéry a vývojáři. Prodám vydání 300. nebo Přihlásit se zde .

Související články:

  • Začněte s WebGL pomocí tří.js
  • 20 JavaScript nástroje pro vyhodit svou mysl
  • Vytvořit interaktivní 3D vizuály s třemi.js

jak - Nejoblíbenější články

Vytvořit webggl 3D přistávací stránka

jak Feb 3, 2026

(Image Credit: budoucnost) Vytvoření stránky přistání WebGL 3D je jeden způsob, jak udělat velký první doje..

Jak vytvořit simulace vody

jak Feb 3, 2026

Tento tutoriál vás naučí vytvořit animovanou pláži dioráma od začátku dokončit pomocí Houdini FX. Rozumíte celému p..

10 věcí, které jste nevěděli, že můžete udělat s Photoshopem

jak Feb 3, 2026

Photoshop je dokonalým příkladem celé je větší než součet jeho částí, z nichž je mnoho; Přetékající poklad s ná..

Jump Start reaguje nativní s expo

jak Feb 3, 2026

Reagovat rodák je platforma, která vám umožní vybudovat nativní mobilní aplikace pomocí JavaScriptu. Jak náz..

Jak navrhnout grafické obrázky

jak Feb 3, 2026

V dřívějších letech mé ilustrační kariéry jsem se vzdal, abych ilustroval postavy, ať už realistické nebo zjednoduše..

zaostřete modely tvrdého povrchu v 3ds max

jak Feb 3, 2026

V tomto tutoriálu se budu sdílet techniky a metody, které používám k vytvoření modelů s pevným povrchem 3ds max..

Jak praskání pracuje ve 3D aplikacích

jak Feb 3, 2026

Jednou z klíčových věcí, které pracují v CGI, by měly poskytnout, je větší přesnost. Je však úžasné, jak těžké..

Jak malovat zombie v klipu studio barva

jak Feb 3, 2026

V tomto výkresu se naučíte Jak kreslit a malovat Zombie použití Clip Studio Paint. Aplikace Di..

Kategorie