Începeți cu WebVR

WebVR este un API JavaScript pentru crearea experiențelor virtuale 3D în browser. Acest lucru necesită o latență scăzută, o rată ridicată a cadrelor și performanțe excelente. Scopul său este de a facilita ca cineva să intre în experiențe VR prin scăderea barierelor la intrare.

WebGL permite dezvoltatorilor să creeze experiențe bogate, de calitate a consolei care se referă în timp real pe dispozitive mobile și browsere desktop (doar asigurați-vă că obțineți web hosting dreptul la capacitate optimă). Aproape browserul universal și suportul dispozitivului îl face o abordare perfectă pentru dezvoltatorii web care doresc să creeze experiențe incredibile VR. Aici vă arătăm cum să începeți cu WebVR. În partea de jos a acestui articol, veți găsi câteva resurse utile pentru a vă cunoaște cunoștințele.

În tutorialul nostru, vom folosi WebVR în combinație cu Trei.js. - O opțiune Go - la mulți Instrumente de design web Disponibil pentru 3D și VR pe web. Este gratuit și open source, ușoare și nenumărate site-uri premiate, o folosesc. Altele decât având un fundal JavaScript, vă puteți scufunda în acest tutorial fără cunoștințe anterioare și creați-vă prima experiență WebVR. Scopul acestui tutorial este de a vă începe să vă inspirați să continuați să explorați această tehnologie foarte interesantă. Vrei ceva mai simplu? Încercați a. Builder de site-uri web .

• Descărcați fișierele pentru acest tutorial de la Filesilo

01. Activați steagul WebVR în crom

WebVR este încă o tehnologie experimentală și necesită HTTPS să ruleze pe serverul dvs. Nu va rula pe dispozitive mobile fără a Polyfill.Github.com/immersive-web/webvr-polyfill. . Cu toate acestea, puteți rula conținut la nivel local în Chrome pentru testare și construire. Asigurați-vă că ați activat pavilionul Webvr Chrome. Tip Chrome: // Steaguri / Enable-WebVR În browserul dvs. URL, apoi faceți clic pe Activare pentru ao activa. Este posibil să trebuiască să reporniți și Chrome.

02. Instalați pluginul de emulare API WebVR

Pentru a testa la nivel local pe desktop-ul dvs. și pentru a evita necesitatea unui dispozitiv, există un plugin mare pe care îl puteți utiliza pe Chrome bytorelează. Pluginul va emula a Setul cu cască VR. Pentru dvs. și vă permiteți să vă deplasați și să rotiți virtute setul cu cască ( adu-o aici ).

03. Deschideți bara de instrumente a dispozitivului în instrumentele de dezvoltatori

Pentru a emula un dispozitiv mobil sau setul de cască, funcționează cel mai bine pentru a utiliza emularea dispozitivului în instrumentele cromate. Deschideți instrumentele de dezvoltator în Chrome și comutați-vă pe bara de instrumente a dispozitivului pentru a vedea vizualizarea mobilă, rotiți peisaj și selectați emularea telefonului preferat.

04. Creați un fișier HTML de bază

Apoi, trebuie să configurați un fișier HTML de bază. Puteți configura fișierele CSS și JavaScript extern sau puteți include Inline pentru simplitate. Clasa Rendererului Trei.Js va crea o & lt; panza & gt; element pentru tine. Adăugați următorul cod la dvs. index.html. fişier:

 html lang = "en" & gt;
& lt; head & gt;
& title & gt; webvr demo & lt; / titlu & gt;
& Lt; Meta Charset = "UTF-8" & GT;
& Lt; Meta Name = "Viewport" Content =
"Lățime = lățimea dispozitivului, scară inițială =
1.0, utilizator-scalable = nu "& gt;
& lt; stil & gt;
html, corp {margine: 0; Padding: 0;
Depășirea: ascunsă; }
& lt; / stil & gt;
& lt; / head & gt;
& lt; corp & gt;
& lt; script & gt;
// codul va merge aici
& lt; / script & gt;
& lt; / corp & gt; 

05. Includeți cursuri trei.js

Includeți un link către biblioteca Three.js din șeful fișierului - fie găzduit extern, fie descărcați-l din depozitul Three.js. De asemenea, veți avea nevoie de noua clasă WebVR și Class BoxlineGetry pentru acest tutorial. Puteți găsi clasele de bibliotecă și de sprijin Aici . Notă: Codul din acest tutorial a fost testat la cea mai recentă versiune de trei.js v99.

 și lt; script src = "libs / trei.min.js" & gt; / script & gt;
& lt; script src = "libs / webvr.js" & gt; / lt; / script & gt;
& lt; script src = "libs / boxlinegeometry.js" & gt;
& lt; / script & gt; 

06. Adăugați variabile globale

Între etichetele scriptului pentru cod, adăugați următoarele variabile globale pentru a accesa la nivel global camera, scena, obiectele și raycaster. Adăugați, de asemenea, a LOVIT variabilă pentru a urmări obiectele care sunt intersectate de privirea camerei. Acest lucru va demonstra cum să știți ce se uită la un utilizator în VR.

 VAR CLOCK = Nou trei.Clock ();
VAR Container, Camera, Scene, Renderer, Cameră,
Crosshair, lovit;
var obiecte = []; // Colecția de obiecte
var num = 100; // Numărul de obiecte
var raycaster = nou trei.rayCaster (); 

07. Creați o scenă 3D

Veți adăuga o scenă 3D de bază, care va fi containerul pentru obiectele dvs. Scena este scena care va face cu camera. Toate prezentările 3D vor avea o scenă sau o etapă a unei forme. Ce se întâmplă în acea etapă și având în vedere camera este ceea ce va vedea utilizatorul. Adăugați următorul cod pentru a adăuga o scenă:

 // Creați un obiect de scenă
Var scenă = nouă trei.Scene (); 

08. Adăugați o cameră de perspectivă

Apoi, trebuie să adăugați o cameră foto. Veți folosi camera de perspectivă, destinată scenelor 3D. Primul atribut este domeniul de vedere al camerei. Al doilea este raportul de aspect ( latime inaltime ). Apoi, puteți indica planul apropiat de tăiere și distanțele planului de tăiere îndepărtate, care definesc ceea ce urmează să fie vizibil pentru cameră.

 // Creați camera
Camera = Nou trei.PerspectiveCamera
(70, fereastră.Innerwidth / fereastră.Innershight,
0,1, 1000);
scena.add (camera); 

09. Adăugați un element Renderer și Canvas

Rendererul gestionează desenul obiectelor din scena dvs. care sunt vizibile pentru cameră. Setați proprietatea Anțiales la adevărat pentru a obține margini netede pe obiect. Rendererul creează a Domelement , care este de fapt un HTML & lt; panza & gt; element. Apoi puteți adăuga la corp. Rețineți utilizarea noului pavilion activat de Renderer.

 Renderer = nou trei.webglrenderer (
{antialias: true});
Renderer.setpixelratio (fereastră.
Devicepixelratio);
Renderer.setsize (fereastră.Innerwidth, fereastră.
innershight);
Renderer.vr.enabled = Adevărat;
document.body.appendandild (Renderer.
Domelement); 

10. Adăugați crosshair camera

Pentru a ajuta utilizatorii să fie orientați spre punctul de focalizare al camerei, este o bună practică de a adăuga o pictogramă de încrucișare sau de direcționare în fața camerei. Puteți să-l adăugați direct la obiectul camerei, așa că este întotdeauna acolo unde ar trebui să fie.

 Crosshair = Nou trei.Mesh (
Noua triunghiuri (0,02, 0.04, 32),
nou trei.meshbasicmaterial ({{
Culoare: 0xfffff,
Opacitate: 0.5,
Transparent: Adevărat
})
);
croshair.position.z = - 2;
camera.add (crosshair); 

11. Creați un obiect de cameră VR (opțional)

Apoi, creați un obiect simplu de cameră. Acest lucru este frumos să dați utilizatorului un sentiment de orientare în lumea VR. Creează o cutie de cameră simplă cu linii pentru a indica pereții, podeaua și tavanul.

 Room = Noi trei.linsemente (
nou trei.boxlineGometry (6, 6, 6, 10, 10, 10),
Nou trei.lineBasicMaterial ({Culoare:
0x808080}));
cameră.poziție.y = 2;
scena.add (camera); 

12. Adăugați lumini la scenă

Pentru a aprinde scena, vom folosi o lumină de emisferă simplă și o lumină direcțională. Va da o vizibilitate ambientală plăcută și o anumită umbrire realistă de la o sursă de lumină uniformă.

 scena.add (nou trei.emisphereLight
(0x806060, 0x40404040));
VAR LIGHT = Nou trei.directionallight
(0xfffff);
light.poziție.set (1, 1, 1) .normalize ();
scena.add (lumina); 

13. Creați unele obiecte

O să umpleți camera cu obiecte în continuare. Aplicați-le la întâmplare în jurul camerei. De asemenea, veți seta rotirea și scara la întâmplare pentru soiuri. Puteți adăuga un pic mai mult cod în următorul pas, unde se spune Creați atribute orbite pentru a activa unele căi orbite personalizate.

 VAR Geometry = New Three.boxbuffergeometry
(0,15, 0,15, 0,15);
pentru (i = 0; i & lt; = Num; I ++) {
VAR Material = Nou trei.meshlambertateriale
({culoarea: matematica.random () * 0xfffff});
var obiect = nou trei.mesh
(geometrie, material);
obiect.position.set (matemath.random () * 4.0
- 2.0, matemath.random () * 4.0 - 2.0, matematică.
Random () * 4.0 - 2.0);
obiect.scale.set (matemath.random () + 5, matematică.
Random () + 5, matematică.random () + 5);
obiect.rotation.set (matemath.random () * 2 *
Math.pi, Math.random () * 2 * Math.pi, matematică.
Random () * 2 * Math.pi);
// Crearea atributelor orbite} 

14. Adăugați atribute orbite obiectelor

Pentru a activa o mișcare orbitană frumoasă, și pentru a păstra obiectele de la "scăparea camerei", vom atribui câteva date inițiale de unghi (în radiani) și o distanță. Permite o modalitate simplă de a anima obiectele în bucla de randare după.

// Creați atribute orbite
// distanța calcoasă ca fiind constantă și atribuită
obiect
var a = nou trei.vector3 (0, 0, 0);
var b = obiect.poziție;
var d = a.distanceto (b);
obiect.distance = d;
obiect.radieni = matematică.random () * 360 * matematică.
Pi / 180; // unghiul inițial
obiect.radian2 = mateth.random () * 360 * matematică.
Pi / 180; // unghiul inițial
obiect.radians3 = mateth.random () * 360 * matematică.
Pi / 180; // unghiul inițial
cameră.add (obiect);
obiecte.push (obiect); 

15. Adăugați un handler de redimensionare a ferestrei

Pe măsură ce încercăm aplicația WebVR, vom redimensiona ecranul, mișcându-l în jur și așa mai departe. Este o idee bună să aveți un handler care ajustează dimensiunile zonei de randare și actualizează lucrurile pentru a menține completarea ecranului corect și a căutăm frumos.

 fereastră.addeventlistener ("redimensionați",
onwindowresize, false);
Funcția onWindowresize () {
camera.aspect = fereastră.Innerwidth / fereastră.
innershight;
camera.updateproficematrix ();
Renderer.setsize (Window.Innerwidth,
fereastră.innerheaight);
} 

16. Creați butonul WebVR

Clasa WebVR nouă a lui Three.js include un buton WebVR, care se ocupă de trecerea în și din modul VR pentru noi. De asemenea, se ocupă dacă dispozitivul nu acceptă modul VR. Puteți să o includeți cu acest cod simplu:

 // TREI.JS WEBVR Butonul pentru a intra /
Ieșiți modul VR.
document.body.appendandchild (webvr.createbutton.
(Renderer)); 

17. Porniți bucla de animație VR

De obicei, ați folosi CerereanimațieFrame Pentru a gestiona bucla de randare, dar în VR trebuie să utilizați un alt manipulator de buclă pentru a vă asigura că totul este gata să facă și să evitați latența și să faceți probleme. În schimb, utilizați noul SetanimațieLoop. și treceți în funcția de referință.

 // Porniți bucla de animație VR
RENDER.SETANIMATIONLOOP (Render); 

18. Creați funcția de redare

Apoi, creați o funcție de redare. Dacă nu ați vrut să vă animați obiectele sau testul pentru aparatul de fotografiat / croshair intersectați cu obiecte, puteți utiliza următorul cod:

 Funcția Render () {
// Găsiți intersecții
// animați obiectele
// face scena
Renderer.Render (scena, camera);
} 

19. Testați pentru intersecții

Pentru a permite testarea obiectelor care intersectează raza trasată de la cameră în spațiul z, adăugați următorul cod la bucla de randare unde ați comentat-o ​​în ultimul pas:

 Raycaster.setfromcamera ({x: 0, Y: 0},
aparat foto );
var intersectes = raycaster.IntersEctobjects
(cameră.copii);
dacă (intersectes.length & gt; 0) {
Dacă (Hit! = intersectează 
 .Object) {
dacă (hit) {hit.material.Emissive.
sethex (hit.currenthex); }
Hit = intersectează 
 .Object;
Hit.currenthex = hit.material.emissive.
gethex ();
Hit.material.emissive.sethex (0x00ff00);
}
} altfel {
dacă (hit) {hit.material.emissive.sethex
(Hit.currenthex); }
Hit = nedefinit;
} 

20. Obiecte animate de-a lungul orbitelor

Apoi, puteți anima obiectele dvs. de-a lungul căilor orbite utilizând acest cod:

 pentru (i = 0; i & lt; = Num; I ++) {
var o = obiecte [i];
o.rotation.y + =. 01;
dacă (i% 2 == 0) {
o.radieni + =. 004;
o.radieni2 + =. 005;
o.radiani3 + =. 008;
} altfel {
o.radieni - =. 006;
o.radieni2 - =. 005;
o.radieni3 - =. 003;
}
o.position.x = (Math.COS (O.RADIANS) *
o.distance);
o.position.z = (matematică (o.radieni3) *
o.distance);
o.position.y = (matematică (o.radieni2) *
o.distance * .5);
} 

21. Realizați scena WebVR

În cele din urmă, puteți face scena dvs. utilizând funcțiile de renume. Dacă nu ați adăugat deja această linie, faceți-o acum. Odată ce ați adăugat acest lucru, puteți să-l testați pe toate și ar trebui să vedeți o redare a scenei WebVR în browserul dvs. De asemenea, puteți să-l verificați pe dispozitivul dvs. mobil sau pe setul cu cască VR.

 // face scena
Renderer.Render (scena, camera); 

WebVR Resurse

Noțiuni de bază în WebVR poate fi copleșitoare. Am adunat câteva exemple de site-uri care utilizează WebVR și resurse pentru a vă ajuta să vă rulați.

Sketchfab.
Probabil că deja știți acest site din cauza galeriei sale uimitoare a activelor, dar are și un mod WebVR care vă permite să navigați în VR.

Un cadru
Acesta este un cadru solid rock pentru AR și VR. Se ocupă de durerile de rezervări și suportul dispozitivului pentru dvs., inclusiv pentru a vă permite să faceți browser-ul dvs. pentru a testa. Ea chiar rezumă crearea de obiecte 3D comune.

Trei.js.
Această bibliotecă are numeroase Exemple Cu codul sursă pentru a vă ajuta să mergeți cu WebVR. Este un punct de plecare perfect.

Webvr.
Deoarece WebVR este o tehnologie emergentă, este o idee bună să țineți pasul cu cele mai recente evoluții. Trebuie să știți ce dispozitive sunt acceptate și în ce condiții. Acest site vă va ajuta să rămâneți la curent. Există A. Pagina dedicată exemplelor , de asemenea.

Și întotdeauna ajută să aibă dreptul Stocare in cloud , de asemenea.

Acest articol a fost publicat inițial în numărul 283 din revista Creative Web Design Web designer . Cumpăra problema 283. sau Abonati-va .

Citeste mai mult:

• 7 Bonkers VR tendințe care vă îndreptau
• Începeți cu Redux Thunk
• 11 tendințe Web Hot chiar acum