Aloita webvr

WebVR on JavaScript API, joka luo 3D-virtuaalisen todellisuuden kokemuksen selaimessa. Tämä vaatii alhaisen latenssin, korkean kehysnopeuden ja erinomaisen suorituskyvyn. Sen tavoitteena on helpottaa kenenkään pääsyn VR-kokemuksiin alentamalla pääsyn esteet.

WebGL: n avulla kehittäjät voivat luoda rikkaita, konsoli-laatukokemuksia, jotka tekevät reaaliaikaisesti mobiililaitteisiin ja työpöydän selaimiin (varmista, että saat sivujen ylläpito Optimaalisen kyvyn oikealle). Lähes yleismaailmallinen selain ja laitteen tuki tekee siitä täydellisen lähestymistavan web-kehittäjille, jotka haluavat luoda uskomattomia VR-kokemuksia. Täällä näytämme, miten voit aloittaa WebVR: n kanssa. Tämän artikkelin alareunassa löydät hyödyllisiä resursseja tietosi lisäämiseksi.

Opetusohjelmassa käytämme WebVR: tä yhdessä kolme.js - MONE-vaihtoehto monille Web-suunnittelutyökalut Saatavana 3D- ja VR: lle verkossa. Se on ilmainen ja avoin lähde, kevyt ja lukemattomat palkitut sivustot käyttävät sitä. Muut kuin JavaScript tausta, voit sukeltaa tähän opetusohjelmaan ilman ennakkotietoja ja luoda ensimmäinen WebVR-kokemus. Tämän opetusohjelman tavoitteena on saada sinut aloittamaan ja innostaa sinua jatkamaan tätä erittäin jännittävää teknologiaa. Haluatko jotain yksinkertaisempaa? Kokeile a Verkkosivuston rakentaja .

• Lataa tämän opetusohjelman tiedostot Filesilosta

01. Ota WebVR-lippu käyttöön Chromessa

WebVR on edelleen kokeellinen tekniikka ja vaatii HTTPS: n toimimaan palvelimellasi. Se ei toimi mobiililaitteissa ilman a polyfill.github.com/immersive-web/webvr-polyfill . Voit kuitenkin käyttää sisältöä paikallisesti kromissa testaukseen ja rakennukseen. Varmista, että Chrome WebVR-lippu ottaa käyttöön. Tyyppi Chrome: // liput / käyttöön-webvr URL-selaimeen ja valitse sitten Ota käyttöön aktivoidaksesi sen. Sinun on ehkä käynnistettävä Chrome uudelleen.

02. Asenna WebVR API Emulation Plugin

Jotta voit testata paikallisesti työpöydälläsi ja välttää laitteen tarvetta, on suuri plugin, jota voit käyttää Chromea ClickToreleaseilla. Plugin jäljittelee a VR-kuulokkeet sinulle ja voit siirtää ja kiertää kuulokkeita käytännöllisesti katsoen ( tuo se tänne ).

03. Avaa laitteen työkalurivi kehittäjätyökaluilla

Mobiililaitteen tai kuulokkeen emuloimiseksi se toimii parhaiten käyttää laitteen emulointia kromityökaluissa. Avaa kromin kehittäjätyökalut ja vaihda laitteen työkalupalkista nähdäksesi mobiilinäkymän, kierrä maisemaan ja valitse Suosikkipuhelimen emulointi.

04. Luo perus HTML-tiedosto

Seuraavaksi sinun on perustettava perus HTML-tiedosto. Voit määrittää ulkoiset CSS- ja JavaScript-tiedostot tai sisällyttää yksinkertaisuuden sisälle. Kolme.js-renderer-luokka luovat & lt; canvas & gt; elementti sinulle. Lisää seuraava koodi index.html Tiedosto:

 & lt; html lang = "en" & gt;
& lt; pää & gt;
& lt; otsikko & gt; webvr demo & lt; / otsikko & gt;
& lt; Meta Charset = "UTF-8" & GT;
& lt; meta nimi = "Viewport" sisältö =
"Leveys = Laitteen leveys, alku-asteikko =
1.0, käyttäjän skaalautuva = ei "& gt;
& lt; tyyli & gt;
HTML, runko {marginaali: 0; Pehmuste: 0;
ylivuoto piilotettu; }
& lt; / tyyli & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; skripti & gt;
// Koodi menee tänne
& lt; / script & gt;
& lt; / body & gt; 

05. Sisällytä kolme.JS-luokat

Sisällytä linkki Three.js-kirjastoon tiedostosi päähän - joko isännöi ulkoisesti tai lataa se kolmesta.js arkistosta. Tarvitset myös uuden WebVR-luokan ja BoxlineGeometrian luokan tähän opetusohjelmaan. Löydät kirjaston ja tukemaan luokkia tässä . Huomautus: Tämän opetusohjelman koodi on testattu viimeisimmässä kolmessa.JS V99: n julkaisussa.

 & lt; skripti src = "libs / three.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. Lisää globaaleja muuttujia

Koodin komentosarjan välillä lisää seuraavat maailmanlaajuiset muuttujat globaalisti kameran, kohtauksen, renderöiden, esineiden ja Raycasteriin. Lisää myös a OSUMA Muuttuja seurata esineitä, jotka leikkaavat kameran katseen. Tämä osoittaa, miten tietää, mitä käyttäjä katsoo VR: ssä.

 var Clock = uusi kolme.Clock ();
Varäiliö, kamera, kohtaus, renderöinti, huone,
CrossHair, osuma;
var-objektit = []; // esineiden kokoelma
var num = 100; // esineiden määrä
var raycaster = uusi kolme.raycaster (); 

07. Luo 3D-kohtaus

Aiot lisätä perus 3D-kohtauksen, joka on esineesi säiliö. Kohtaus on vaihe, joka tekee kameran kanssa. Kaikissa 3D-esityksillä on jonkinlainen kohtaus tai vaihe. Mikä on siinä vaiheessa ja kameran kannalta, mitä käyttäjä näkee. Lisää kohta kohta seuraavasti:

 // Luo kohtausobjekti
var Scene = uusi kolme.Scene (); 

08. Lisää perspektiivinen kamera

Seuraavaksi sinun on lisättävä kamera. Käytät perspektiivikameraa, joka on tarkoitettu 3D-kohtauksiin. Ensimmäinen attribuutti on kameran näkökenttä. Toinen on kuvasuhde ( leveys korkeus ). Sitten voit ilmoittaa lähellä leikkuutason ja kauas leikkaustason etäisyydet, jotka määrittävät kameran näkyvän.

 // Luo kamera
Kamera = uusi kolme.PerversiveCamera
(70, ikkuna.innerwidth / window.innerheight,
0,1, 1000);
Scene.Add (kamera); 

09. Lisää renderöinti ja kangaselementti

Renderer käsittelee kameran näkyviä kohteiden piirustusta. Aseta Antialias-ominaisuus totta, jotta objektiin sileät reunat. Renderer luo kumous , joka on itse asiassa HTML & lt; canvas & gt; elementti. Voit sitten liittää kehoon. Huomaa uuden VR-yhteensopivan lipun käyttö Rendererin.

 renderer = uusi kolme.Webglrenderer (
{antialias: totta});
renderer.setpixelratio (ikkuna.
devicepixelratio);
renderer.setella (window.innerwidth, ikkuna.
sisäinen);
renderer.vr.Enabled = tosi;
document.body.oppendchild (Renderer.
kumous); 

10. Lisää kameran crosshair

Jotta käyttäjät voivat käyttää kameran tarkennuspisteeseen, on hyvä käytäntö lisätä crossheair tai kohdistuskuvake kameran eteen. Voit lisätä sen suoraan kameran esineeseen, joten se on aina missä sen pitäisi olla.

 CrossHair = uusi kolme.Mesh (
Uusi kolme.RingBuffergeometria (0,02, 0,04, 32),
Uusi kolme.Meshbasicmateriaalia ({
Väri: 0xffffff,
Opasiteetti: 0,5,
Läpinäkyvä: totta
}))
);
crosshair.position.z = - 2;
Kamera.Add (Crosshair); 

11. Luo VR-huoneen esine (valinnainen)

Seuraavaksi luo yksinkertainen huonebjekti. Tämä on mukava antaa käyttäjälle tunteen suuntaus VR-maailmassa. Se luo yksinkertaisen huoneen laatikon, jossa on linjat, jotka osoittavat seiniä, lattiaa ja kattoa.

 Room = Uusi kolme
Uusi kolme.BoxLineGeometria (6, 6, 6, 10, 10, 10),
Uusi kolme.LineBasicmateriaalia ({Väri:
0x808080}));
room.position.y = 2;
Scene.Add (huone); 

12. Lisää valoja kohtaukseen

Jos haluat valaisee kohtausta, käytämme yksinkertaista pallonpuoliskolla ja suuntavalossa. Se antaa mukava ympäröivä näkyvyys ja realistinen varjostus yhtenäisestä valonlähteestä.

 Scene.Add (uusi kolme.hemispherelight
(0x806060, 0x404040));
var light = uusi kolme.direktioleight
(0xffffff);
light.position.set (1, 1, 1) .Normalize ();
Scene.Add (valo); 

13. Luo joitain esineitä

Aiot täyttää huoneen seuraavaksi esineillä. Levitä ne satunnaisesti huoneen ympärille. Voit myös asettaa pyörimisen ja asteikon satunnaisesti lajikkeeseen. Voit lisätä hieman koodia seuraavaan vaiheeseen, jossa se sanoo Luo kiertoradan attribuutteja Joidenkin mukautettujen kierrosten käyttöönotto.

 var geometry = uusi kolme.BoxBuffergeometria
(0,15, 0,15, 0,15);
(i = 0, i & lt; = num; i ++) {
var materiaali = uusi kolme.Meshlambertmateriaalia
({Väri: Math.random () * 0xffffff});
var object = uusi kolme.mesh
(geometria, materiaali);
esine.position.set (Math.random () * 4.0
- 2.0, Math.random () * 4.0 - 2.0, Matematiikka.
satunnainen () * 4.0 - 2.0);
Object.Scale.set (Math.random () +. 5, matematiikka.
Satunnainen () + 5, Math.random () +. 5);
Object.Rotation.set (Math.random () * 2 *
MATH.PI, MATH.RANDOM () * 2 * MATH.PI, MATH.
Satunnainen () * 2 * Math.PI);
// Luo kiertoradan attribuutteja} 

14. Lisää kiertoradan attribuutteja esineisiin

Jotta kaikki mukavat satunnaiset kiertävät liikkeet ja pitää esineet "pakenemaan huoneen", annamme joitain alkuperäiset kulmatiedot (radialaisilla) ja etäisyydellä. Se mahdollistaa yksinkertaisen mahdollisuuden animoida esineitä Render Loopissa.

// Luo kiertoradan attribuutteja
// laskettu etäisyys vakiona ja määritä
esine
var a = uusi kolme.Vector3 (0, 0, 0);
var b = objektin.position;
var d = a.distanceteto (b);
esine.distance = d;
Object.radians = Math.random () * 360 * Matematiikka.
PI / 180; // Alkukulma
Object.radians2 = Math.random () * 360 * Matematiikka.
PI / 180; // Alkukulma
Object.radians3 = Math.random () * 360 * Matematiikka.
PI / 180; // Alkukulma
huone ..dd (esine);
esine .push (esine); 

15. Lisää ikkunakoituksiin

Kun testaamme WebVR-sovelluksemme, siirrymme näytön, siirtämällä sitä ja niin edelleen. On hyvä ajatus saada käsittelijä, joka säätää render-alueen mitat ja päivittää asioita, jotta se täyttäisi näytön oikein ja näyttää hyvältä.

 Window.AddeventListener ("Muuta kokoa",
onwindowresize, false);
Toiminto onwindowresize () {
Kamera.Aspect = Window.innerWidth / Window.
sisäinen;
kamera.UpdateprojektiMatrix ();
renderer.setella (window.innerwidth,
window.innerheight);
} 

16. Luo WebVR-painike

Kolme.JS: n uusi WebVR-luokka sisältää WebVR-painikkeen, joka käsittelee meille VR-tilassa ja ulos. Se käsittelee myös, jos laite ei tue VR-tilaa. Voit sisällyttää sen tähän yksinkertaiseen koodiin:

 // three.js webvr-painike syöttää /
Poistu VR-tilasta
document.body.oppendchild (webvr.createbutton
(Renderer)); 

17. Aloita VR-animaatiosilmukan

Tyypillisesti käytät Pyydettävä Käsittele renderointililäätä, mutta VR: ssä sinun on käytettävä eri silmukkakäsittelijää, jotta kaikki on valmis tekemään ja että vältät latenssia ja renderoita. Käytä sen sijaan uutta Setanimationloop ja siirrä render-toiminnon.

 // Aloita VR-animaatiosilmukan
renderer.setanimationloop (render); 

18. Luo Render-toiminto

Seuraavaksi luo render-toiminto. Jos et halunnut animoida esineitä tai testata kameran / ristikkäin, leikkaa esineitä, voit vain käyttää seuraavaa koodia:

 Toiminto render () {
// löytää risteyksiä
// Animoida esineet
// tee kohtaus
renderer.render (kohtaus, kamera);
} 

19. Testaa risteyksiä

Jotta testaus esineille, jotka leikkaavat kamerasta z-tilaan jäljellä olevaa säteilyä, lisää seuraava koodi renderilisälle, jossa kommentit sitä viimeisessä vaiheessa:

 Raycaster.SetFromCamera ({X: 0, Y: 0},
kamera);
Var insects = raycaster.interecterbocks
(Room.children);
jos (leikkaus ).Length & gt; 0) {
Jos (osuma! = leikkaa 
 .Object) {
Jos (osuma) {hit.materiaal.Missive.
Sethex (hit.currenthex); }
Hit = leikkaa 
 .Object;
Hit.currenthex = hit.materiaal.Missive.
gex ();
Hit.material.emissive.sethex (0x00ff00);
}
} muu {
jos (osuma) {hit.materiaal.emissive.sethex
(Hit.currenthex); }
Hit = määrittelemätön;
} 

20. Animoi esineitä kiertoradalla

Seuraavaksi voit animoida esineet pitkin kiertorata-polkuja käyttämällä tätä koodia:

 (i = 0, i & lt; = num; i ++) {
var o = esineet [i];
o.rotation.y + =. 01;
Jos (i% 2 == 0) {
O.radians + =. 004;
o.radians2 + =. 005;
o.radians3 + =. 008;
} muu {
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 webvr-kohtaus

Lopuksi voit tehdä kohtauksen käyttämällä käyttökelpoista toimintoja. Jos et ole vielä lisännyt tätä riviä, tee se nyt. Kun olet lisännyt tämän, voit testata kaiken ja pitäisi nähdä selaimessasi WebVR-kohtaus. Voit myös tarkistaa sen mobiililaitteessa tai VR-kuulokkeessa.

 // tee kohtaus
renderer.render (kohtaus, kamera); 

WebVR-resurssit

Aloittaminen WebVR: ssä voi olla ylivoimainen. Olemme koonneet joitain esimerkkejä sivustoista, jotka käyttävät WebVR: tä ja resursseja, joiden avulla voit saada liikkuvan.

Sketchfab
Luultavasti jo tiedät tämän sivuston, koska se on hämmästyttävän omaisuuden takia, mutta sillä on myös WebVR-tila, jonka avulla voit siirtyä VR: ssä.

Kehys
Tämä on rock-kiinteä kehys Ar ja VR. Se käsittelee sinulle hylättyjen ja laitteen tuen kipuja, mukaan lukien voit tehdä selaimesi testaukseen. Se jopa tiivistää yhteisen 3D-esineiden luomisen.

Kolme.js
Tämä kirjasto on lukuisia esimerkit Lähdekoodilla auttaa sinua menemään WebVR: n kanssa. Se on täydellinen lähtökohta.

Webvr
Koska WebVR on kehittyvä teknologia, on hyvä ajatus pysyä viimeisimmän kehityksen kanssa. Sinun täytyy tietää, mitkä laitteet tuetaan ja missä olosuhteissa. Tämä sivusto auttaa sinua pysymään ajan tasalla. Siellä Sivu, joka on omistettu esimerkkeihin Myös myös.

Ja se auttaa aina olemaan oikeassa pilvivarasto Myös myös.

Tämä artikkeli julkaistiin alun perin asiassa 283 Creative Web Design Magazine Nettisivujen suunnittelija . Osta numero 283 tai tilata .

Lue lisää:

• 7 Bonkers VR Trendit otsikko
• Aloita Redux Thunk
• 11 Hot Web Trends juuri nyt