Inizia con WebVR

WebVR è un'API JavaScript per creare esperienze di realtà virtuale 3D nel browser. Ciò richiede bassa latenza, alta frequenza fotogrammi e prestazioni eccellenti. Il suo scopo è quello di rendere più facile per chiunque entri nelle esperienze VR abbassando le barriere all'ingresso.

WebGL consente agli sviluppatori di creare esperienze ricche di qualità console che rendono in tempo reale sui dispositivi mobili e sui browser desktop (assicurati di ottenere il web hosting giusto per capacità ottimali). Il browser quasi universale e il supporto del dispositivo lo rende un approccio perfetto per gli sviluppatori web che vogliono creare incredibili esperienze VR. Qui, ti mostriamo come iniziare con il webvr. In fondo a questo articolo, troverai alcune risorse utili per ulteriori tue conoscenze.

Nel nostro tutorial, useremo il webvr in combinazione con tre.js. - un'opzione go-all'altra dei molti Strumenti di progettazione Web. Disponibile per 3D e VR sul web. È gratuito e open source, leggero e innumerevoli siti web pluripremiato lo usano. Oltre ad avere uno sfondo JavaScript, puoi immergerti in questo tutorial senza conoscenze precedenti e creare la prima esperienza di WebVR. L'obiettivo di questo tutorial è quello di iniziare e ispirarti a continuare ad esplorare questa tecnologia molto eccitante. Vuoi qualcosa di più semplice? Prova a Builder del sito web .

• Scarica i file per questo tutorial da filelio

01. Abilita la bandiera del webvr in Chrome

WebVR è ancora una tecnologia sperimentale e richiede HTTPS da eseguire sul tuo server. Non funzionerà su dispositivi mobili senza a Polyfill.github.com/immersive-web/webvr-polyfill. . Tuttavia, è possibile eseguire contenuti localmente in cromo per il test e la costruzione. Assicurati di abilitare il flag Chrome WebVR. genere Chrome: // Bandiere / Abilita-WebVR Nel tuo browser URL, quindi fai clic su Abilita per attivarlo. Potrebbe essere necessario riavviare anche Chrome.

02. Installare il plugin di emulazione API WebVR

Per testare localmente sul desktop ed evitare la necessità di un dispositivo, c'è un ottimo plugin che è possibile utilizzare su Chrome tramite clickcorlease. Il plugin emulerà a Auricolare VR. per te e ti consente di spostare e ruotare virtualmente l'auricolare ( prendilo qui ).

03. Apri barra degli strumenti del dispositivo negli strumenti per sviluppatori

Per emulare un dispositivo mobile o un auricolare, funziona meglio per utilizzare l'emulazione del dispositivo in strumenti cromati. Aprire gli strumenti per sviluppatori in Chrome e disattiva la barra degli strumenti del dispositivo per visualizzare la vista mobile, ruotare in orizzontale e selezionare Emulazione del telefono preferita.

04. Creare un file HTML di base

Successivamente, è necessario configurare un file HTML di base. È possibile impostare file CSS e JavaScript esterni o includere in linea per semplicità. Three.js 'Rendering Class creerà a & lt; tela e GT; elemento per te. Aggiungi il seguente codice al tuo index.html. file:

 & lt; html lang = "en" & gt;
& lt; head & gt;
& lt; Titolo & GT; webvr demo & lt; / Titolo & GT;
& lt; meta chater = "utf-8" & gt;
& lt; meta name = "vistaport" contenuto =
"larghezza = larghezza del dispositivo, scala iniziale =
1.0, User-Scable = No "& GT;
& lt; style & gt;
HTML, Body {Margine: 0; Imbottitura: 0;
Overflow: nascosto; }
& lt; / style & gt;
& lt; / head & gt;
& lt; corpo e GT;
& lt; script & gt;
// codice andrà qui
& lt; / script & gt;
& lt; / body & gt; 

05. Include le classi tre.js

Includi un collegamento alla libreria Three.js nella testa del file - ospitato esternamente o scaricarlo dal repository a tre.js. Avrai anche bisogno della nuova classe di classe Web e BoxLinegeometry di classe WebVR per questo tutorial. Puoi trovare la biblioteca e le classi di supporto Qui . Nota: il codice in questo tutorial è stato testato sull'ultima versione di 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. Aggiungi variabili globali

Tra i tag script per il codice, aggiungere le seguenti variabili globali per accedere a livello globale la fotocamera, la scena, i rendering, gli oggetti e il raycaster. Aggiungi anche A. COLPIRE variabile per tenere traccia degli oggetti intersecati dallo sguardo della fotocamera. Questo dimostrerà come sapere cosa sta esaminando un utente in VR.

 VAR CLOCK = NUOVO TRE.CLOCK ();
contenitore Var, macchina fotografica, scena, rendering, stanza,
Crosshair, colpito;
var oggetti = []; // raccolta di oggetti
var num = 100; // Numero di oggetti
var raycaster = nuovo tre.Raycaster (); 

07. Crea una scena 3D

Stai per aggiungere una scena 3D di base, che sarà il contenitore per i tuoi oggetti. La scena è il palcoscenico che renderà con la fotocamera. Tutte le presentazioni 3D avranno una scena o una fase di qualche forma. Ciò che è in quella fase e in vista della fotocamera è ciò che l'utente vedrà. Aggiungi il seguente codice per aggiungere una scena:

 // Crea un oggetto scena
var scene = nuovo tre.scene (); 

08. Aggiungi una fotocamera prospettiva

Quindi, è necessario aggiungere una fotocamera. Utilizzerai la fotocamera prospettica, intesa per scene 3D. Il primo attributo è il campo visivo della fotocamera. Il secondo è il rapporto aspetto ( larghezza altezza ). Quindi puoi indicare il piano di ritaglio vicino e le distanze del piano di clipping di gran lunga, che definiscono cosa deve essere visibile alla telecamera.

 // crea fotocamera
fotocamera = new tre.perspectiveCamera
(70, finestra.innerwidth / window.innerheight,
0,1, 1000);
scena.add (fotocamera); 

09. Aggiungi un rendering e un elemento tela

Il renderer gestisce il disegno degli oggetti nella tua scena visibile alla fotocamera. Impostare la proprietà Antialias su true per ottenere bordi lisci sull'oggetto. Il renderer crea a Domelé. , che è in realtà un html & lt; tela e GT; elemento. Puoi quindi aggiungere al corpo. Nota l'uso del nuovo flag abilitato VR del renderer.

 Renderer = Nuovo tre.WebglRenderer (
{Antialias: True});
rendering.setpixelratio (finestra.
devicepixelratio);
renderer.sesize (window.innerwidth, finestra.
innerheight);
renderer.vr.enabled = true;
document.body.appendchild (rendering.
Domelment); 

10. Aggiungi fotocamera crosshair

Per aiutare gli utenti a orientare al punto di messa a fuoco della fotocamera, è una buona pratica aggiungere un icona crosshair o targeting davanti alla telecamera. Puoi aggiungerlo direttamente all'oggetto della fotocamera, quindi è sempre dove dovrebbe essere.

 Crosshair = new tre.mesh (
Nuova tre.RingBuffergeometry (0,02, 0,04, 32),
Nuovo tre.MeshBasicMaterial ({
Colore: 0xFFFFFFF,
Opacità: 0,5,
Trasparente: vero
})
);
crosshair.position.z = - 2;
fotocamera.add (Crosshair); 

11. Creare un oggetto della stanza VR (opzionale)

Quindi, crea un semplice oggetto della stanza. Questo è bello dare all'utente un senso di orientamento nel mondo del VR. Crea una semplice scatola della camera con linee per indicare le pareti, il pavimento e il soffitto.

 Room = New Three.lineeggments (
Nuova tre.BoxlineGeometria (6, 6, 6, 10, 10, 10),
Nuovo tre.LineBasicmaterial ({Colore:
0x808080}));
stanza.position.y = 2;
scena.add (stanza); 

12. Aggiungi luci alla scena

Per illuminare la scena, useremo una semplice luce dell'emisfero e una luce direzionale. Darà una bella visibilità ambientale e qualche ombreggiatura realistica anche da una fonte di luce uniforme.

 Scena.add (nuovo tre.Hemisplelight
(0x806060, 0x40404040));
Var Light = nuovo tre.Directionallight
(0xFFFFFFFF);
light.position.set.set (1, 1, 1) .ismoralize ();
scena.add (luce); 

13. Crea alcuni oggetti

Hai intenzione di riempire la stanza con gli oggetti dopo. Applicali casualmente intorno alla stanza. Impostarai anche la rotazione e la scala in modo casuale per la varietà. Puoi aggiungere un po 'più di codice nel prossimo passo, dove dice Crea attributi orbita per consentire alcuni percorsi orbitali personalizzati.

 VAR GEOMETRY = nuovo tre.BoxBuffergeometry
(0,15, 0,15, 0,15);
per (i = 0; i & lt; = num; i ++) {
Materiale VAR = nuovo tre.MeshlashlabertMaterial
({colore: math.random () * 0xffffff});
var oggetto = nuovo tre.mesh
(geometria, materiale);
oggetto.position.set.set (Math.random () * 4.0
- 2.0, matematica.random () * 4.0 - 2.0, matematica.
casuale () * 4,0 - 2.0);
oggetti.scale.set (math.random () +. 5, matematica.
casuale () +. 5, math.random () +. 5);
Object.rotation.set (Math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, matematica.
casuale () * 2 * math.pi);
// Crea attributi orbita} 

14. Aggiungi gli attributi orbita agli oggetti

Per consentire un bel movimento in orbitante casuale, e per mantenere gli oggetti da "Escaping della stanza" assegneremo alcuni dati iniziali dell'angolo (in radianti) e una distanza. Abilita un modo semplice per animare gli oggetti nel ciclo di rendering dopo.

 // Crea attributi orbita
// distanza calc come costante e assegna
oggetto
var a = nuovo tre.Vector3 (0, 0, 0);
var b = oggetto.position;
var d = a.distanceto (B);
oggetto.distance = D;
Object.radians = math.random () * 360 * matematica.
PI / 180; // Angolo iniziale
Object.RADIANS2 = Math.random () * 360 * Matematica.
PI / 180; // Angolo iniziale
Object.RADIANS3 = Math.random () * 360 * Math.
PI / 180; // Angolo iniziale
stanza.add (oggetto);
oggetti.push (oggetto); 

15. Aggiungi un gestore di ridimensionamento della finestra

Mentre testiamo la nostra app WebVR, ridimensionare lo schermo, spostandolo e così via. È una buona idea avere un gestore che regola le dimensioni dell'area di rendering e aggiorna le cose per mantenerlo riempire correttamente lo schermo e sembrare carino.

 Finestra.AddeventListener ('ridimensiona',
onwindowresize, false);
funzione onwindowresize () {
Fotocamera.aspect = window.innerwidth / window.
innerheight;
fotocamera.updateproejectmatrix ();
renderer.sesize (window.innerwidth,
finestra.innerheight);
} 

16. Creare il pulsante WebVR

Three.JS 'La nuova classe WebVR include un pulsante WebVR, che gestisce il passaggio e la modalità VR per noi. Gestisce anche se il dispositivo non supporta la modalità VR. Puoi includerlo con questo semplice codice:

 // Three.js Webvr Pulsante per entrare /
Esci dalla modalità VR
document.body.appendchild (webvr.createbutton.
(Renderer)); 

17. Avvia il ciclo di animazione VR

Tipicamente, useresti il RichiestaNiMationFrame. Per gestire il loop di rendering, ma in VR è necessario utilizzare un gestore di loop diverso per garantire che tutto sia pronto per il rendering e che eviti la latenza e il rendono problemi. Invece, usa il nuovo setanimationloop. e passare nella tua funzione di rendering.

 // Avvia il ciclo di animazione VR
rendering.setanimationloop (rendering); 

18. Creare la funzione di rendering

Quindi, crea una funzione di rendering. Se non volevi animare oggetti o testare per la fotocamera / crosshair che si interseca con gli oggetti, è possibile utilizzare il seguente codice:

 Funzione rendering () {
// trova intersezioni
// animare gli oggetti
// rende la scena
renderer.Render (scena, fotocamera);
} 

19. Test per intersezioni

Per abilitare il test per gli oggetti che intersecano il raggio tracciato dalla fotocamera nello spazio z, aggiungi il seguente codice al tuo loop di rendering dove l'hai commentato nell'ultimo passaggio:

 raycaster.setfromcamera ({x: 0, y: 0},
telecamera );
var intersect = raycaster.intersectobjects
(room.children);
se (intersect.length & gt; 0) {
IF (Hit! = Intersects 
 .Object) {
Se (colpire) {hit.material.emissive.
sethex (hit.currenthex); }
Hit = intersect 
 .Object;
Hit.currenthex = hit.material.missive.
gethex ();
Hit.material.emissive.sethex (0x00FF00);
}
} altro {
Se (colpito) {hit.material.emissive.sethex
(Hit.currenthex); }
Hit = indefinito;
} 

20. Animazione oggetti lungo orbite

Quindi, puoi animare i tuoi oggetti lungo i loro percorsi orbita usando questo codice:

 per (i = 0; i & lt; = num; i ++) {
var o = oggetti [i];
o.rotazione.y + =. 01;
se (I% 2 == 0) {
o.radians + =. 004;
o.RADIANS2 + =. 005;
o.radians3 + =. 008;
} altro {
o.radians - =. 006;
o.radians2 - =. 005;
o.radians3 - =. 003;
}
o.position.x = (math.cos (o.radians) *
o.Distanzia);
o.position.z = (math.sin (o.radians3) *
o.Distanzia);
o.position.y = (math.sin (o.radians2) *
o.Distance * .5);
} 

21. Rendi la scena del webvr

Infine, puoi eseguire il rendering della scena utilizzando le funzioni di rendering in uso. Se non hai già aggiunto questa linea, fallo ora. Una volta aggiunto questo, puoi testarlo tutto e dovresti vedere un rendering della scena WebVR nel tuo browser. Puoi anche verificarlo sul tuo dispositivo mobile o sull'auricolare VR.

 // Render la scena
renderer.Render (scena, fotocamera); 

Risorse WebVR.

Iniziare in WebVR può essere travolgente. Abbiamo assemblato alcuni esempi di siti che utilizzano WebVR e risorse per aiutarti a ottenere il rotolamento.

Sketchfab.
Probabilmente conosci già questo sito grazie alla sua straordinaria galleria di beni, ma ha anche una modalità WebVR che consente di navigare in VR.

Una cornice
Questo è un quadro rock-solido per AR e VR. Gestisce i dolori dei fallbacks e del supporto del dispositivo per te, incluso l'abilitazione di rendering nel tuo browser per il test. Astrava persino la creazione di oggetti 3D comuni.

Tre.js.
Questa biblioteca ha numerosi esempi con il codice sorgente per aiutarti ad andare con il webvr. È un punto di partenza perfetto.

Webvr.
Dato che WebVR è una tecnologia emergente è una buona idea tenere il passo con gli ultimi sviluppi. È necessario sapere quali dispositivi sono supportati e in quali condizioni. Questo sito ti aiuterà a rimanere aggiornato. C'è un Pagina dedicata agli esempi , pure.

E aiuta sempre a avere il giusto deposito cloud. , pure.

Questo articolo è stato originariamente pubblicato in questione 283 di creative Web Design Magazine Web designer . Comprare il problema 283. o sottoscrivi .

Per saperne di più:

• 7 Bonkers VR Trends Andando a modo tuo
• Inizia con Redux Thunk
• 11 tendenze hot web adesso