Kom i gang med WebVR

WebVR er et JavaScript API for at skabe 3D Virtual Reality oplevelser i browseren. Dette kræver lav latens, høj billedhastighed og fremragende ydeevne. Dens mål er at gøre det lettere for nogen at komme ind i VR-oplevelser ved at sænke adgangsbarriererne.

WebGl gør det muligt for udviklere at skabe rige, konsolkvalitetsoplevelser, der gengiver i realtid på mobile enheder og desktopbrowsere (bare sørg for at du får Web Hosting. ret til optimal kapacitet). Næsten Universal Browser og Device Support gør det til en perfekt tilgang til webudviklere, der ønsker at skabe utrolige VR-oplevelser. Her viser vi dig, hvordan du kommer i gang med WebVR. I bunden af ​​denne artikel finder du nogle nyttige ressourcer til at fremme din viden.

I vores vejledning bruger vi WebVR i kombination med tre.js. - en go-to mulighed for de mange Web Design Tools. Tilgængelig til 3D og VR på nettet. Det er gratis og open source, letvægts, og utallige prisvindende hjemmesider bruger den. Bortset fra at have en JavaScript-baggrund, kan du dykke ind i denne vejledning uden forudgående viden og skabe din første WebVR-oplevelse. Målet med denne vejledning er at komme i gang og inspirere dig til at fortsætte med at udforske denne meget spændende teknologi. Vil du have noget enklere? Prøv A. Website Builder. .

• Download filerne til denne vejledning fra FileSilo

01. Aktiver WebVR Flag i Chrome

WebVR er stadig en eksperimentel teknologi og kræver, at HTTPS skal køre på din server. Det vil ikke køre på mobile enheder uden a polyfill.github.com/immerive-web/webvr-polyfill . Du kan dog køre indhold lokalt i Chrome til test og bygning. Sørg for at aktivere Chrome WebVR-flag. Type Chrome: // Flags / Aktiver-WebVR I din URL-browser, og klik derefter på Aktiver for at aktivere den. Det kan være nødvendigt at genstarte krom også.

02. Installer WebVR API Emulation Plugin

For at teste lokalt på dit skrivebord og undgå behovet for en enhed, er der et godt plugin, som du kan bruge på Chrome af ClickTorelease. Pluginet vil efterligne en Vr headset. For dig og lad dig flytte og rotere headsettet næsten ( Få det her ).

03. Åbn værktøjslinje i udviklerværktøjer

For at efterligne en mobilenhed eller headset fungerer det bedst for at bruge enhedens emulering i kromværktøjer. Åbn udviklerværktøjerne i Chrome, og skift på værktøjslinjen Enhed til at se mobilvisning, drej til landskab og vælg Favorit Phone Emulation.

04. Opret en grundlæggende HTML-fil

Dernæst skal du oprette en grundlæggende HTML-fil. Du kan oprette eksterne CSS og JavaScript-filer eller inkludere inline for enkelhed. Three.js 'Renderer klasse vil skabe en & lt; lærred & gt; element for dig. Tilføj følgende kode til din index.html. fil:

 & lt; HTML LANG = "DA" & GT;
& lt; hoved & gt;
& lt; titel & gt; webvr demo & lt; / titel & gt;
& lt; meta charset = "utf-8" & gt;
& lt; meta navn = "Viewport" content =
"Bredde = enhedsbredde, indledende skala =
1.0, bruger-skalerbar = nej "& gt;
& lt; stil & gt;
HTML, krop {margin: 0; Padding: 0;
Overløb: Skjult; }
& lt; / stil & gt;
& lt; / Head & GT;
& lt; body & gt;
& lt; script & gt;
// kode vil gå her
& lt; / script & gt;
& lt; / body & gt; 

05. Inkluder tre.js klasser

Medtag et link til Three.js biblioteket i hovedet af din fil - enten vært eksternt, eller download det fra tre.js repository. Du skal også bruge den nye WebVR klasse og BoxlineGeometry klasse til denne vejledning. Du kan finde biblioteket og understøttende klasser her . Bemærk: Koden i denne vejledning er blevet testet på den seneste udgivelse af Three.js V99.

 & lt; script src = "libs / tre.min.js" & gt; & lt; / script & gt;
& lt; script src = "libs / webvr.js" & gt; & lt; / script & gt;
& lt; script src = "libs / boxlineGeometry.js" & gt;
& lt; / script & gt; 

06. Tilføj globale variabler

Mellem script-mærkerne til koden skal du tilføje følgende globale variabler til globalt adgang til kameraet, scenen, renderer, objekter og raycaster. Tilføj også A. Hit Variabel for at holde styr på objekter, der skæres af kameraets blik. Dette vil demonstrere, hvordan man ved, hvad en bruger ser på i VR.

 Var Clock = Ny Three.Clock ();
Var container, kamera, scene, renderer, værelse,
crosshair, hit;
VAR OBJECTS = []; // Indsamling af objekter
var num = 100; // Antal objekter
var raycaster = ny tre.raycaster (); 

07. Opret en 3D-scene

Du skal tilføje en grundlæggende 3D-scene, som vil være beholderen til dine genstande. Scenen er det stadium, der vil gøre med kameraet. Alle 3D-præsentationer vil have en scene eller et fase af en eller anden form. Hvad der er i det stadium og i lyset af kameraet er, hvad brugeren vil se. Tilføj følgende kode for at tilføje en scene:

 // Opret en sceneobjekt
var scene = ny tre.Scene (); 

08. Tilføj et perspektivkamera

Derefter skal du tilføje et kamera. Du bruger perspektivkameraet, beregnet til 3D-scener. Den første attribut er området for kameraet. Det andet er billedforholdet ( bredde højde ). Derefter kan du angive det nærklippeplan og de fjerne klipplanafstande, som definerer, hvad der skal være synligt for kameraet.

 // Opret kamera
kamera = ny tre.perspectivecamera
(70, vindue.innerwidth / window.innerheight,
0,1, 1000);
scene.add (kamera); 

09. Tilføj en renderer og lærredselement

Rendereren håndterer tegningen af ​​objekterne i din scene, der er synlige for kameraet. Indstil ANTIALIAS-ejendommen til at sande for at få glatte kanter på objektet. Rendereren opretter en domelement. , som faktisk er en HTML & lt; lærred & gt; element. Du kan derefter tilføje til kroppen. Bemærk brugen af ​​det nye VR-aktiverede flag af Renderer.

 Renderer = ny tre.webgrenderer (
{antialias: true});
renderer.setpixelratio (vindue.
DevicePixelRatio);
renderer.setsize (vindue.innerwidth, vindue.
indreheight);
renderer.vr.enabled = true;
dokument.body.appendchild (renderer.
domelement); 

10. Tilføj kamera crosshair

For at hjælpe brugerne med at orientere på kameraets fokuspunkt, er det god praksis at tilføje et tværsnits- eller målretningsikon foran kameraet. Du kan tilføje den direkte til kameraets objekt, så det er altid, hvor det skal være.

 Crosshair = Nye tre.Mesh (
ny tre.Ringbuffergeometri (0,02, 0,04, 32),
Nye tre.meshbasicmaterial ({
Farve: 0xffffff,
Opacitet: 0,5,
Gennemsigtig: TRUE.
})
);
crosshair.position.z = - 2;
Camera.Add (Crosshair); 

11. Opret et VR-objekt (valgfrit)

Dernæst opret en simpel rumobjekt. Dette er rart at give brugeren en følelse af orientering i VR-verdenen. Det skaber en simpel rumkasse med linjer for at angive væggene, gulvet og loftet.

 Room = New Three.Linesegments (
Ny tre.boxlineGeometri (6, 6, 6, 10, 10, 10),
Ny tre.lineBasicmaterial ({farve:
0x808080}));
room.position.y = 2;
scene.add (værelse); 

12. Tilføj lys til scenen

For at tænde scenen bruger vi et simpelt halvkugle lys og et retningslys. Det giver en god omgivende synlighed og nogle realistiske skygge fra en ensartet lyskilde.

 Scene.Add (New Three.HemiSheriLight
(0x806060, 0x404040));
var lys = nyt tre.directionalht
(0xFFFFFF);
lys.position.set (1, 1, 1). Normalisering ();
scene.add (lys); 

13. Opret nogle objekter

Du skal fylde rummet med genstande næste. Påfør dem tilfældigt omkring rummet. Du vil også indstille rotationen og skalaen tilfældigt til sort. Du kan tilføje lidt mere kode i næste trin, hvor det står Opret kredsløb attributter for at aktivere nogle brugerdefinerede bane stier.

 var geometri = ny tre.boxbuffergeometri
(0,15, 0,15, 0,15);
for (i = 0; i & lt; = num; i ++) {
VAR MATERIAL = New Three.MeshLambertmaterial
({farve: math.random () * 0xffffff});
var objekt = ny tre.mesh
(geometri, materiale);
objekt.position.set (math.random () * 4.0
- 2.0, matemath.random () * 4,0 - 2,0, matematik.
tilfældigt () * 4,0 - 2,0);
objekt.scale.set (math.random () +. 5, matematik.
tilfældigt () +. 5, math.random () +. 5);
objekt.rotation.set (math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, matematik.
tilfældigt () * 2 * math.pi);
// Opret orbit attributter} 

14. Tilføj orbit attributter til objekter

For at muliggøre en god tilfældige kredsløbsbevægelse, og for at holde objekterne fra 'undslippe rummet', vil vi tildele nogle indledende vinkeldata (i radianer) og en afstand. Det gør det muligt for en simpel måde at animere objekterne i rendersløjfen efter.

// Opret kredsløb attributter
// calc afstand som konstant og tildel til
objekt
Var A = Ny tre.Vector3 (0, 0, 0);
var b = objekt.position;
Var d = a.distanceto (b);
Object.Distance = D;
Object.radians = Math.Random () * 360 * matematik.
Pi / 180; // første vinkel
objekt.radians2 = math.random () * 360 * matematik.
Pi / 180; // første vinkel
objekt.radians3 = math.random () * 360 * matematik.
Pi / 180; // første vinkel
Room.Add (objekt);
objekter.push (objekt); 

15. Tilføj et vindue Resize Handler

Når vi tester vores WebVR-app, vil vi ændre størrelsen på skærmen, flytte den rundt, og så videre. Det er en god ide at have en håndterer, der justerer dimensionerne af Render-området og opdaterer ting for at holde det fylder skærmen korrekt og ser godt ud.

 vindue.addeventtalener ('resize',
Onwindowresize, False);
Funktion OnwindowResize () {
Camera.Aspect = vindue.innerwidth / vindue.
Innerheight;
kamera.updateprojectionMatrix ();
renderer.setsize (vindue.innerwidth,
vindue.innerheight);
} 

16. Opret webvr-knappen

Three.js 'New WebVR klasse indeholder en WebVR-knap, som håndterer at skifte ind og ud af VR-tilstand for os. Det håndterer også, om enheden ikke understøtter VR-tilstand. Du kan inkludere det med denne enkle kode:

 // Tre.js WebVR-knap for at indtaste /
Afslut VR-tilstand
DOCUMENT.BODY.APPENDCHILD (WEBVR.CreateButton.
(renderer)); 

17. Start VR animationsløjfen

Typisk ville du bruge RequestanimationFrame. For at håndtere rendersløjfen, men i VR skal du bruge en anden loophåndterer for at sikre, at alt er klar til at gøre, og at du undgår latens og gengivelse. I stedet skal du bruge den nye SetanimationLoop. og passere i din render-funktion.

 // Start VR animationsløjfen
renderer.setanimationloop (render); 

18. Opret renderfunktionen

Dernæst opret en renderfunktion. Hvis du ikke ønskede at animere dine objekter eller test for kameraet / crosshair skærer med objekter, kan du bare bruge følgende kode:

 Funktion Render () {
// Find kryds
// animere objekterne
// gør scenen
renderer.render (scene, kamera);
} 

19. Test for kryds

For at aktivere test for objekter, der skærer ray spores fra kameraet til Z-rum, skal du tilføje følgende kode til din gengivelse, hvor du kommenterede det i det sidste trin:

 Raycaster.setfromcamera ({X: 0, Y: 0},
kamera );
Var Intersects = raycaster.intersectobjects
(værelse.Children);
hvis (intersects.length & gt; 0) {
hvis (hit! = skærer 
 .object) {
hvis (hit) {hit.material.emissive.
Sethex (hit.currenthex); }
Hit = skærer 
 .object;
Hit.currenthex = hit.material.emissive.
gethex ();
Hit.material.emissive.sehex (0x00FF00);
}
} ellers {
hvis (hit) {hit.material.emissive.sex
(Hit.currenthex); }
Hit = undefined;
} 

20. Animere objekter langs baner

Derefter kan du animere dine objekter langs deres kredsløbstier ved hjælp af denne kode:

 For (I = 0; I & LT; = num; i ++) {
var o = objekter [i];
o.rotation.y + =. 01;
Hvis (I% 2 == 0) {
o.radians + = 004;
o.radians2 + =. 005;
o.radians3 + =. 008;
} ellers {
o.radians - =. 006;
o.radians2 - =. 005;
o.radians3 - =. 003;
}
o.position.x = (math.cos (o.radians) *
o.Distance);
o.position.z = (matemath.sin (o.radians3) *
o.Distance);
o.position.y = (math.sin (o.radians2) *
o.Distance * .5);
} 

21. Gør WebVR scenen

Endelig kan du gøre din scene ud af din scene ved hjælp af de brugervenlige opgaver. Hvis du ikke har tilføjet denne linje allerede, gør det nu. Når du har tilføjet dette, kan du teste det hele ud og skulle se en WebVR scenegengivelse i din browser. Du kan også tjekke det ud på din mobilenhed eller VR-headset.

 // gør scenen
renderer.render (scene, kamera); 

WebVR Resources.

Kom godt i gang i WebVR kan være overvældende. Vi har samlet nogle eksempler på websteder ved hjælp af WebVR og ressourcer, der hjælper dig med at få rullende.

SketchFab.
Du kender sandsynligvis allerede dette websted på grund af sit fantastiske galleri af aktiver, men det har også en WebVR-tilstand, der gør det muligt at navigere i VR.

A-frame.
Dette er en rock-solid ramme for AR og VR. Det håndterer smerterne i Fallbacks og Device Support til dig, herunder at gøre det muligt for dig at gøre i din browser til testning. Det abstrakterer endda væk skabelse af fælles 3D-objekter.

Tre.js.
Dette bibliotek har mange eksempler. med kildekode for at hjælpe dig med at komme med WebVR. Det er et perfekt udgangspunkt.

Webvr.
Da WebVR er en fremvoksende teknologi, er det en god ide at holde op med de seneste udviklinger. Du skal vide, hvilke enheder der understøttes, og under hvilke forhold. Dette websted hjælper dig med at holde dig opdateret. Der er en side dedikeret til eksempler , også.

Og det hjælper altid med at have det rigtige Sky lagring , også.

Denne artikel blev oprindeligt offentliggjort i udstedelse 283 af Creative Web Design Magazine Webdesigner . Køb problem 283. eller abonnere .

Læs mere:

• 7 Bonkers VR Trends på vej til din vej
• Kom i gang med Redux Thunk
• 11 Hot Web Trends lige nu