Dette prosjektet vil bli delt opp i forskjellige deler. Vi vil gi en kort introduksjon til Heroku, vise hvordan du bruker fysijs med tre.js, forklare hvordan du håndterer sockethendelser over node.js og hvordan vi går om å håndtere de sendte dataene.
20 fantastiske eksempler på webgl i aksjon
01. Heroku
Heroku er en enkel å bruke og gratis trial node.js webserver
Dette prosjektet vil bli vert på
Heroku.
, som er en skyplattform for å være vert for appene dine. Den har et bredt utvalg av støttede språk som Ruby, Java, PHP og Python. Vi skal bruke node.js.
Registrer deg for en konto og velg node.js. For dette prosjektet kan vi bruke den grunnleggende serveren, som er gratis. Etter registrering kommer du til Dashboarden din der du kan opprette appen din. Dette vil skape et underdomene på herokuapp.com.
Som en distribusjonsmetode kan du velge å enten bruke HEROKU-kommandolinjegrensesnittet (CLI) for å distribuere ved hjelp av GIT-depotet, eller ha en tilkobling satt opp til GitHub eller Dropbox. Jeg har valgt å gå med sin CLI; Dette vil kreve en installasjon. Men i retur får du en rekke nye nyttige verktøy, en av disse er live feilsøking gjennom terminalen din.
For å konfigurere serveren anbefaler jeg at du følger trinnene
Som beskrevet her
.
For å distribuere du bruker standard git-kommandoer. Hver du bruker vil utløse byggeserveren, og appen din vil bli distribuert til Heroku-serveren og deretter synlig på underdomenet.
Når koden er distribuert, kan du se prosjektet ditt på [YourProject] .HerokuApp.com. Hvis du vil vise loggene, bruk kommandoen 'HEROKU LOGS - Tail' i terminalen din. Noen av de tingene som vises, er det som blir servert til klienten - den viser stikkontaktene, og hvis du vil feilsøke koden din, kan du også bruke konsollen. Log for å utdrive til terminalen.
02. Bygg fysikkscenen
Trykk på skjermen eller trykk mellomromstasten for å sprette bordet opp
Vi vil bruke de mest populære
Webgl.
rammeverk,
tre.js.
, for å bygge en 3D-scene som inneholder et objekt som vi legger til fysikk. Fysikkbiblioteket av valg er
Physijs.
, en plug-in for tre.js. Som en forlengelse til tre.js bruker fysijs den samme kodekonvensjonen, noe som gjør det enklere å bruke hvis du allerede er kjent med tre.js.
Det første er biljardbordet. Vi bruker fysijs
HeightfieldMesh.
, Fordi dette nettverket vil lese høyden fra planetometrien. Så det vil i utgangspunktet vikle seg rundt tre.js-objektet.
VAR TableGeometri = Ny tre.Planeegeometri (650, 500, 10, 10);
VAR Tablemater materiale = fysijs.createMaterial (
nytt tre.Meshphongmaterial ({
Shininess: 1,
Farge: 0xb00000,
Emissive: 0x111111,
Side: Three.Doubleside.
}),
.8, // friksjon
.4 // Restitution.
);
Tabell = Ny Physijs.HeightfieldMesh (TableGeometri, tables materiale, 0);
Så
HeightfieldMesh.
Krever en geometri, men også et fysijs materiale. Vi legger til to nye funksjoner til tre.js-materialet. De er den
friksjon
og
restitusjon
variabler. Friksjon er motstanden objektet gjør, og restitusjon refererer til "bounciness". Disse to variablene vil definere hvor ekte fysikken vil føle seg i din scene.
For de opprettede bassengkulene vil vi ikke gjøre dem for hoppende, så hold nummeret lavt. Som tre.js har fysijs også en rekke grunnleggende former for å gå rundt i det opprinnelige nettverket.
SPHEREMESH.
Innpakning av det
SPompæltometri
vil gi ballfysikken. Når vi initialiserer scenen, kaller vi
Buildball (8)
, som vil utløse følgende funksjon ...
var buildball = funksjon (nummerball) {
var balltekstur = ny tre.Texture ();
var ballindex = ball.length;
ballmaterial.map.wraps = ballmaterial.map.wrapt = three.repeArtwrapping;
ballmaterial.map.repeat.Set (1, 1);
Lag den fysikkaktiverte sfæremeshen, og start den opp i luften:
ball [ballindex] = ny fysijs.Spheremesh (
Ny tre.SphereGeometri (25, 25, 25),
ballmateriale,
100.
);
// y kompensert til toppen av lerretet
ball [ballindex] .position.y = 500;
// skygger
ball [ballindex] .receiveshadow = sant;
ball [ballindex] .castshadow = sant;
// Legg til ballen til lerretet ditt
scene.add (ball [ballindex]);
};
Vi legger til tekstur fra en .jpg-fil. Skape materialet og bruk det for
SPHEREMESH.
Å lage objektet, som vi vil plassere vertikalt til toppen, slik at den faller inn på skjermen.
03. Stikkontakter tilkobling
Nøkkelmålet med vårt spill er å emulere de fysiske bevegelsene på skjermen
For kommunikasjon mellom serveren og klienten, vil vi bruke
socket.io.
. Dette er en av de mest pålitelige bibliotekene som er tilgjengelige for node.js. Den er bygget på toppen av WebSockets API.
Nå er fysikk aktivert for maskene vi trenger brukerinngang for å gjøre spillet interaktivt. Inngangsenheten vi bruker er mobilenheten. Mobilbrowseren er kontrolleren som vil gi data
fra akselerometeret og gyroskopet
til skrivebordet hvor du vil se spillet.
Først av må en forbindelse mellom mobilnettleseren og skrivebordsbrowseren gjøres. Hver gang en nettleser kobles til vår node.js app, må vi lage en ny tilkobling. En klientsiden tilkobling er opprettet ved å bruke følgende:
var stikkontakt = io.Connect ();
For å sende meldinger du bruker
emit.
funksjon:
socket.emit ('Event Name', Data);
Og for å motta deg bruker du
.på()
funksjon:
socket.on ('hendelsesnavn', funksjon () {});
03.1. Sette opp skrivebordet spillet
Hvis vi er på skrivebordet, vil vi sende våre stikkontakter en enhet avgir å fortelle serveren vår skrivebordet er spillet med følgende linje med kode:
var socket = io.Connect ();
// Når du starter velkomstmelding, svar med 'Game' -type
socket.on ('velkommen', funksjon (data) {
socket.emit ("Enhet", {"type": "spill"});
});
Serveren vil returnere oss en unik nøkkel / spillkode
generert av Crypto.
. Dette vil bli vist på skrivebordet.
Fortell spillklient å initialisere og vise spillkoden til brukeren ...
socket.emit ("Initialize", GameCode);
03.2. Koble kontrolleren til spillet
For å koble mobilenheten til spillet, vil vi bruke et skjema for å sende inn spillkoden fra skrivebordet. På skjemaet sendes vi spillkoden til serveren for godkjenning.
Nå som forbindelsen er etablert, vil vi sende gyro og akselerometervariabler til spillet. Ved å bruke den
window.ondevicemotion.
og
window.ondeviceorientering
Hendelser, vi har dataene vi trenger for å etterligne de samme tiltbevegelsene i telefonen til biljardbordet. Jeg har valgt å bruke et intervall på 100ms for å avgi disse verdiene.
Flere baller er lik morsommere. Prøv å treffe mellomromstasten eller trykke på skjermen på mobilen din
For å gi det litt mer interaktivitet, har jeg lagt til et par ekstra hendelser for brukeren å leke med. Vi skal gi brukeren muligheten til å legge til ekstra baller ved siden av 8-ballen ved hjelp av tallene på tastaturet.
En annen er å sprette bordet oppover. For dette kan du slå mellomromstasten. Men vi legger også til en trykkhendelse på kontrollerenheten. Dette vil sende en hendelse til biljardbordet, som vil stige bordet og sende ballene opp.
Først må vi fange tastaturarrangementene ...
// Lag baller / slambord på mellomromstasten
Document.AddeventListener ('KeyDown', Funksjon (E) {
hvis (e.keycode == 49) {// nøkkel: 1
buildball (1);
} ellers hvis (e.keycode == 50) {// nøkkel: 1
buildball (2);
} ellers hvis (e.keycode == 51) {// nøkkel: 1
buildball (3);
} ellers hvis (e.keycode == 32) {// nøkkel: mellomromstasten
bouncetable ();
}
});
De
Buildball
Funksjonen er den samme funksjonen vi pleide å lage sfæren 8-ballen. Vi bruker bare forskjellige teksturer som vil vikle sfæren. For å skyve bordet opp, gir vi bordet en oppadgående bevegelse langs y-aksen med denne koden ...
Legg til flere baller og se hvor mye nettleseren din kan håndtere
Når du har et konsept for et spill eller noe annet, er det helt sannsynlig at det er biblioteker der ute som kan gjøre livet enklere. Dette er en demo som viser hvordan dette kan fungere. Vi håper dette vil bidra til å gi noen kreative ideer eller hjelpe deg med ditt nåværende prosjekt. Se et live eksempel på spillet
her
, eller finn den på
GitHub.
.
Denne artikkelen ble opprinnelig publisert i utgave 300 av
nett
, verdens toppmagasin for profesjonelle webdesignere og utviklere.
Kjøp utgave 300.
eller
Abonner her
.
Flame Painter er en frittstående maling og partikkel effekter pakke som gjør at du raskt og enkelt vil skape originale malerier, lyse effekter, ukonvensjonelle design eller fantastiske bakg..
Figma er et grafikkverktøy for UI-designere. Den har et enkelt grensesnitt og gjør det mulig å samarbeide på jobb med lagkameratene dine. Hvis du vil jobbe offline, kan du velge å bruke ..
