Aan de slag met WebVR

WebVR is een JavaScript-API voor het maken van 3D-virtual reality-ervaringen in de browser. Dit vereist een lage latentie, een hoge framesnelheid en uitstekende prestaties. Het doel is om het voor iedereen gemakkelijker te maken om in VR-ervaringen te komen door de belemmeringen voor toegang te nemen.

WebGL stelt ontwikkelaars in staat om rijke ervaringen voor console-kwaliteit te creëren die in realtime op mobiele apparaten en desktopbrowsers renderen (zorg ervoor dat u de web hosting Recht voor optimale mogelijkheden). Bijna universele browser- en apparaatondersteuning maakt het een perfecte aanpak voor webontwikkelaars die ongelooflijke VR-ervaringen willen creëren. Hier laten we u zien hoe u begint met WebRVR. Onderaan dit artikel vindt u een aantal nuttige middelen om uw kennis te bevorderen.

In onze tutorial gebruiken we webvr in combinatie met Three.js - een go-to-optie van de vele Webdesignhulpmiddelen beschikbaar voor 3D en VR op internet. Het is gratis en open source, lichtgewicht en talloze bekroonde websites gebruiken het. Anders dan een JavaScript-achtergrond hebben, kunt u deze tutorial met geen voorkennis in duiken en uw eerste WebRVR-ervaring maken. Het doel van deze tutorial is om je te laten beginnen en je inspireert om deze zeer opwindende technologie te blijven verkennen. Wil je iets eenvoudiger? Proberen website bouwer ​

• Download de bestanden voor deze tutorial van Filesilo

01. Schakel WebVR-vlag in Chrome in

Webvr is nog steeds een experimentele technologie en vereist HTTPS om op uw server te lopen. Het zal niet op mobiele apparaten worden uitgevoerd zonder een Polyfill.github.com/Immersive-web/webvr-polyfill ​U kunt echter de inhoud lokaal uitvoeren in chroom voor testen en bouwen. Zorg ervoor dat de vlag van Chrome Webvr mogelijk is. Type Chrome: // vlaggen / activeren-webvr In uw URL-browser en klik vervolgens op Inschakelen om het te activeren. Mogelijk moet u ook Chrome opnieuw opstarten.

02. Installeer de Plugin van de WebVR API-emulatie

Om lokaal op uw bureaublad te testen en de behoefte aan een apparaat te voorkomen, is er een geweldige plug-in die u op Chrome kunt gebruiken door ClicktorElease. De plug-in zal een VR-headset Voor jou en laat je de hoofdtelefoon vrijwel bewegen en draaien ( krijg het hier ​

03. Open apparaatwerkbalk in ontwikkelaarstools

Om een ​​mobiel apparaat of headset te emuleren, werkt het het best om de emulatie van het apparaat in chroomgereedschap te gebruiken. Open de ontwikkelaarstools in Chrome en schakel op de werkbalk van het apparaat om de mobiele weergave te zien, draait naar het landschap en selecteer Favoriete telefoonemulatie.

04. Maak een standaard HTML-bestand aan

Vervolgens moet u een standaard HTML-bestand instellen. U kunt externe CSS- en JavaScript-bestanden instellen of inline indienen voor eenvoud. Three.js 'renderer klasse zal een & lt; canvas & gt; element voor jou. Voeg de volgende code toe aan uw index.html het dossier:

 & LT; HTML LANG = "EN" & GT;
& LT; HOOFD & GT;
& LT; TITLE & GT; WebVR Demo & LT; / TITLE & GT;
& LT; Meta CharsSet = "UTF-8" & GT;
& lt; meta naam = "viewport" -inhoud =
"Breedte = apparaatbreedte, initiële schaal =
1.0, gebruiker-schaalbaar = nee "& GT;
& LT; STYLE & GT;
html, lichaam {marge: 0; Vulling: 0;
overloop verborgen;​
& LT; / STYLE & GT;
& LT; / HOOFD & GT;
& LT; BODY & GT;
& lt; script & gt;
// code gaat hierheen
& LT; / Script & GT;
& LT; / BODY & GT; 

05. Neem drie.js-klassen op

Neem een ​​link op naar de Three.js-bibliotheek in het hoofd van uw bestand - ofwel wordt gehost extern of download het van de drie-opslagplaats. Je hebt ook de nieuwe Webvr-klasse en BoxLinegegeometry-klasse nodig voor deze tutorial. Je kunt de bibliotheek en ondersteunende klassen vinden hier ​Opmerking: de code in deze tutorial is getest op de nieuwste versie van Three.js V99.

 & lt; script src = "libs / three.min.js" & gt; & lt; / script & gt;
& LT; Script SRC = "Libs / Webvr.js" & GT; & LT; / Script & GT;
& LT; script SRC = "LIBS / BOXLINLEGEETRY.JS" & GT;
& lt; / script & GT; 

06. Voeg globale variabelen toe

Tussen de script-tags voor de code voegt u de volgende globale variabelen toe aan wereldwijd toegang tot de camera, scène, render, objecten en raycaster. Voeg ook een toe RAKEN variabele om objecten te bijhouden die door de blik van de camera worden doorgesneden. Dit zal aantonen hoe te weten wat een gebruiker in vr.

 Var-klok = nieuwe drie.clock ();
Var-container, camera, scène, renderer, ruimte,
Crosshair, hit;
var-objecten = []; // verzameling van objecten
varum = 100; // aantal objecten
Var Raycaster = nieuwe Three.raycaster (); 

07. Maak een 3D-scène

Je gaat een eenvoudige 3D-scène toevoegen, die de container voor je objecten zal zijn. De scène is het podium dat met de camera zal renderen. Alle 3D-presentaties hebben een scène of fase van een of andere vorm. Wat in die fase is en in het licht van de camera is wat de gebruiker zal zien. Voeg de volgende code toe om een ​​scène toe te voegen:

 // Maak een scèneobject
Var-scène = nieuwe three.scene (); 

08. Voeg een perspectiefcamera toe

Vervolgens moet u een camera toevoegen. U gebruikt de perspectiefcamera, bedoeld voor 3D-scènes. Het eerste attribuut is het gezichtsveld van de camera. De tweede is de beeldratio ( breedte hoogte ​Dan kunt u het bij het knippen van het vlak en de uitknippvliegtuigafstanden aangeven, die definiëren wat is om zichtbaar te zijn voor de camera.

 // Maak een camera
Camera = nieuwe Three.PerspectiveCamera
(70, venster.innerwidth / window.innerHeight,
0,1, 1000);
scène.ADD (camera); 

09. Voeg een renderer en canvaselement toe

De renderer behandelt de tekening van de objecten in uw scène die zichtbaar zijn voor de camera. Stel de antialias-eigendom in op trouw om gladde randen op het object te krijgen. De renderer creëert een dom , wat eigenlijk een HTML is & lt; canvas & gt; element. Je kunt dan bij het lichaam toevoegen. Let op het gebruik van de nieuwe VR-ingeschakelde vlag van de renderer.

 renderer = nieuw drie.Webglssender (
{antialias: true});
renderer.setpixelratio (venster.
DevicePixelratio);
renderer.setsize (venster.innerwidth, venster.
innerhoogte);
renderer.vr.enabled = true;
Document.Body.PhDchild (renderer.
domelement); 

10. Voeg Camera Crosshair toe

Om gebruikers te helpen op het punt van focus van de camera, is het een goede gewoonte om een ​​dwarsblauw of targetingpictogram voor de camera toe te voegen. U kunt het rechtstreeks aan het camerabordering toevoegen, dus het is altijd waar het zou moeten zijn.

 Crosshair = nieuwe drie.mesh (
nieuwe three.ringbuffergeometrie (0,02, 0,04, 32),
NIEUWE DRIE SHBASICMATERIAL ({
Kleur: 0xFFFFFF,
Dekking: 0,5,
transparant: waar
​
​
Crosshair.position.z = - 2;
camera.ADD (Crosshair); 

11. Maak een VR-kamerobject (optioneel)

Maak vervolgens een eenvoudig kamerobject. Dit is leuk om de gebruiker een gevoel van oriëntatie in de VR-wereld te geven. Het creëert een eenvoudige kamerdoos met lijnen om de muren, vloer en plafond aan te geven.

 Kamer = nieuwe drie.linesegmenten (
Nieuwe Three.BoxLinegeometry (6, 6, 6, 10, 10, 10),
Nieuwe Three.LineBasicMaterial ({Color:
0x808080}));
kamer.position.y = 2;
scène.ADD (kamer); 

12. Voeg licht toe aan de scène

Om het tafereel aan te gaan, gebruiken we een eenvoudig halfrondlamp en een directioneel licht. Het geeft een leuk zichtbaar zicht en een realistische schaduw van een uniforme lichtbron.

 SCENE.ADD (NIEUWE DRIE DRIE.HEMISPHERLIGHT
(0x806060, 0x404040));
Var Light = NIEUWE DRIE. Directioneel artikel
(0xFFFFFF);
licht.position.set (1, 1, 1). Normalize ();
scène.ADD (licht); 

13. Maak een aantal objecten

Je gaat de kamer met objecten invullen. Breng ze willekeurig in de kamer toe. U zult ook de rotatie en schaal willekeurig instellen voor variëteit. Je kunt een beetje meer code toevoegen in de volgende stap, waar het zegt creëer orbitattributen Om een ​​aantal aangepaste baanpaden in te schakelen.

 Var Geometry = Nieuwe Three.Boxbuffergeometry
(0,15, 0,15, 0,15);
voor (i = 0; i & lt; = num; i ++) {
Var Materiaal = NIEUWE DRIE-SHADLAMBERTMATERIALE
({Kleur: Math.Random () * 0xFFFFFF});
Var-object = nieuwe drie.mesh
(geometrie, materiaal);
object.position.set (Math.Random () * 4.0
- 2.0, Math.Random () * 4.0 - 2.0, wiskunde.
willekeurig () * 4.0 - 2.0);
Object.Scale.Set (Math.Random () +. 5, wiskunde.
Willekeurig () +. 5, Math.Random () +. 5);
object.rotation.set (Math.Random () * 2 *
Math.Pi, Math.Random () * 2 * Math.pi, Math.
willekeurig () * 2 * math.pi);
// Creëer Orbit Attributes} 

14. Voeg orbitattributen toe aan objecten

Om wat leuke willekeurige baan in te schakelen en om de objecten te behouden van 'de kamer te ontsnappen', wijzen we enkele initiële hoekgegevens (in Radians) en een afstand toe. Het maakt een eenvoudige manier om de objecten op de renderlus te animeren.

// Creëer Orbit-attributen
// calc-afstand als constant en toewijzen aan
voorwerp
Var A = Nieuwe Three.Vector3 (0, 0, 0);
var b = object.positie;
Var D = A.Distanceto (B);
object.distance = D;
Object.radians = Math.Random () * 360 * wiskunde.
Pi / 180; // eerste hoek
Object.radians2 = Math.Random () * 360 * wiskunde.
Pi / 180; // eerste hoek
Object.radians3 = MATH.RANDOM () * 360 * MATH.
Pi / 180; // eerste hoek
kamer.add (object);
Objects.push (object); 

15. Voeg een venster de grootte van de wijzers toe

Naarmate we onze WebVR-app testen, zullen we het scherm wijzigen, het in de buurt brengen, enzovoort. Het is een goed idee om een ​​handler te hebben die de afmetingen van het rendergebied aanpast en dingen bijwerkt om het het scherm goed te houden en er goed uit te zien.

 venster.ADDEVENTLISTENER ('Gevormloop',
onwindowresize, false);
functie onwindowresize () {
camera.aspect = window.innerwedding / raam.
innerhoogte;
camera.updateProjectionMatrix ();
renderer.setsize (venster.innerwidth,
venster.innerHeight);
} 

16. Maak de WebVR-knop

Three.js 'NIEUWE Webvr-klasse bevat een WebVR-knop, die handvatten omschakelt in en uit de VR-modus voor ons. Het behandelt ook als het apparaat geen VR-modus ondersteunt. U kunt het opnemen met deze eenvoudige code:

 // Three.js WebVR-knop om in te voeren /
Verlaat de VR-modus
document.body.appdchild (Webvr.createButton
(renderer)); 

17. Start de VR-animatielus

Meestal zou je de requestanimationframe Om de renderlus te verwerken, maar in vredes moet je een andere lusbehandeling gebruiken om ervoor te zorgen dat alles klaar is om te renderen en dat je latentie vermijdt en problemen maakt. Gebruik in plaats daarvan het nieuwe Setanimationloop en passeer je renderfunctie.

 // Start de VR-animatielus
renderer.setanimationloop (render); 

18. Maak de renderfunctie

Maak vervolgens een renderfunctie. Als u uw objecten of test niet wilt animeren voor de camera / Crosshair doorsnijden met objecten, kunt u gewoon de volgende code gebruiken:

 functie render () {
// Zoek kruispunten
// Animeer de objecten
// render de scène
renderer.render (scène, camera);
} 

19. Test voor kruispunten

Om te testen op objecten die doorkruisen van de straal die wordt getraceerd uit de camera in Z-ruimte, voegt u de volgende code toe aan uw renderlus waar u het in de laatste stap hebt gereageerd:

 Raycaster.SetFromCamera ({x: 0, Y: 0},
camera);
var kruisen = raycaster.intersectobjecten
(Kamer.Children);
if (kruist.lengte & gt; 0) {
Als (hit! = kruist 
 .Object) {
if (hit) {hit.material.emissive.
sethex (hit.currenthex);​
Hit = kruist 
 .Object;
Hit.currenthex = hit.material.emissive.
Gethex ();
Hit.material.emissive.sethex (0x00FF00);
​
} anders {
if (hit) {hit.material.emissive.sethex
(Hit.currenthex);​
Hit = undefined;
} 

20. Animeer objecten langs banen

Vervolgens kunt u uw objecten oplopen langs hun baanpaden met deze code:

 voor (i = 0; i & lt; = num; i ++) {
var o = objecten [i];
o.rotation.y + =. 01;
if (i% 2 == 0) {
o.radians + =. 004;
o.radians2 + =. 005;
o.radians3 + =. 008;
} anders {
O.Radians - =. 006;
o.radians2 - =. 005;
o.radians3 - =. 003;
​
o.Position.x = (Math.cos (O.Radians) *
o.Distance);
o.position.z = (MATH.SIN (O.Radians3) *
o.Distance);
o.position.y = (MATH.SIN (O.Radians2) *
o.Distance * .5);
} 

21. Render de WebVR-scène

Ten slotte kunt u uw scène uitvoeren met behulp van de bruikbare functies. Als je deze regel nog niet hebt toegevoegd, doe het dan nu. Nadat u dit hebt toegevoegd, kunt u het allemaal op testen en een WebVR-scène in uw browser moeten zien. U kunt het ook bekijken op uw mobiele apparaat of VR-headset.

 // render de scène
renderer.Render (scène, camera); 

Webvr-bronnen

Aan de slag in Webvr kan overweldigend zijn. We hebben enkele voorbeelden van sites verzameld met behulp van WebVR en middelen om u te helpen rollen te worden.

Sketchfab
U kent deze site waarschijnlijk al vanwege de verbazingwekkende galerij van activa, maar heeft ook een WebVR-modus waarmee u in VR kunt navigeren.

Een kader
Dit is een rotsvast framework voor AR en VR. Het verwerkt de pijnen van terugvallen en apparaatondersteuning voor u, inclusief het inschakelen van u om in uw browser voor testen. Het abstracteert zelfs het creëren van gemeenschappelijke 3D-objecten.

Three.js
Deze bibliotheek heeft talrijk voorbeelden Met broncode om u te helpen met Webvr te gaan. Het is een perfect uitgangspunt.

Webvr
Omdat WebRVR een opkomende technologie is, is het een goed idee om de nieuwste ontwikkelingen bij te houden. U moet weten welke apparaten worden ondersteund en onder welke voorwaarden. Deze site helpt u op de hoogte te blijven. Er is een Pagina gewijd aan voorbeelden , ook.

En het helpt altijd om het recht te hebben cloud opslag , ook.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 283 van Creative Web Design Magazine Webdesigner ​ Koop Issue 283 of inschrijven ​

Lees verder:

• 7 Bonkers VR Trends die op de hoogte zijn
• Ga aan de slag met Redux Thunk
• 11 hete webtrends nu