Kezdje el a Webvr-t

A Webvr egy JavaScript API, amely 3D-s virtuális valóság tapasztalatokat hoz létre a böngészőben. Ez alacsony késleltetést, magas képsebességet és kiváló teljesítményt igényel. Célja, hogy könnyebbé tegye a VR-élményeket, ha csökkenti a belépési akadályokat.

A WebGL lehetővé teszi a fejlesztők számára, hogy gazdag, konzolminőségű élményeket hozzanak létre, amelyek valós idejűek a mobileszközökön és az asztali böngészőkön (csak győződj meg róla, hogy megkapja a web hosting az optimális képesség érdekében). A szinte univerzális böngésző és az eszköztámogatás tökéletes megközelítést biztosít a webfejlesztők számára, akik hihetetlen VR-élményeket kívánnak létrehozni. Itt megmutatjuk, hogyan kell elkezdeni a Webvr-t. A cikk alján talál néhány hasznos erőforrásokat a tudás továbbfejlesztéséhez.

A bemutatónkban a Webvr-t együtt fogjuk használni három.js - a sok közül a lehetőség Webes tervezési eszközök 3D-re és VR-re áll rendelkezésre az interneten. Szabad és nyílt forráskódú, könnyű, és számtalan díjnyertes webhely használata. A JavaScript hátterétől eltérő, akkor az előzetes tudás nélkül merülhet, és hozza létre az első Webvr tapasztalatát. Ennek a bemutatónak az a célja, hogy elkezdje és inspirálja Önt, hogy folytassa ezt a nagyon izgalmas technológiát. Szeretne valami egyszerűbbet? Próbáld ki a weboldal építője .

• Töltse le a fájlokat a filefilo-ból

01. A Webvr zászló engedélyezése Chrome-ban

A Webvr még mindig kísérleti technológia, és megköveteli a HTTPS futtatását a kiszolgálón. Ez nem fog működni mobil eszközök nélkül anélkül polifill.github.com/immersive-web/webvr-polyfill . Azonban a Tartalmat helyben futtathatja a krómban a teszteléshez és az épülethez. Ügyeljen arra, hogy engedélyezze a Chrome Webvr zászlót. típus Chrome: // Flags / Enable-Webvr Az URL-böngészőbe, majd kattintson az Engedélyezés gombra az aktiválásához. Lehet, hogy újra kell indítania a krómot is.

02. Telepítse a Webvr API emulin plugint

Annak érdekében, hogy helyileg teszteljük az asztalon, és ne szükség van egy eszköz szükségességére, van egy nagy bővítmény, amelyet krómnál kattintanak a ClickTorelease segítségével. A plugin emulálja a VR fejhallgató Az Ön számára, és hogy gyakorlatilag mozgassa és forgassa el a fejhallgatót ( Szerezd meg itt ).

03. Nyissa meg az eszköz eszköztár a fejlesztői eszközökben

A mobilkészülék vagy a fülhallgató emulálása érdekében a legjobban használhatja a készülék emulációját a krómozott eszközökben. Nyissa meg a Fejlesztői eszközöket a Chrome-ban, és kapcsolja be a készülék eszköztárát, hogy megtekinthesse a mobil nézetet, forgassa el a tájképet, és válassza ki a kedvenc telefon emulációt.

04. Hozzon létre egy alapvető HTML fájlt

Ezután be kell állítania egy alapvető HTML fájlt. Beállíthatja a külső CSS-t és a JavaScript fájlokat, vagy tartalmazhat az egyszerűség beillesztését. A három.js 'renderer osztály létrehozza a & lt; vászon & gt; az Ön számára. Adja hozzá a következő kódot az Önnek index.html Fájl:

 & lt; html lang = "en" & gt;
& lt; head & gt;
& lt; title & gt; Webvr demo & lt; / cím & gt;
& lt; meta Charset = "UTF-8" & gt;
& lt; meta név = "nézetablak" tartalom =
"Szélesség = eszközszélesség, kezdeti skála =
1.0, Felhasználó-skálázható = nem "& gt;
& lt; style & gt;
HTML, test {margó: 0; Padding: 0;
túlcsordulás: rejtett; }
& lt; / style & gt;
& lt; / head & gt;
& lt; test & gt;
& lt; script & gt;
// A kód itt fog menni
& lt; / script & gt;
& lt; / test & gt; 

05. Tartalmazza a három.js osztályt

Tartalmazzon egy linket a három.js könyvtárhoz a fájl fejében - akár kívül is, vagy töltse le a három.js tárolóból. Ezen a bemutató számára is szüksége lesz az új Webvr osztályra és a BoxLineometry osztályra. Megtalálhatja a könyvtárat és a támogató osztályokat itt . MEGJEGYZÉS: A bemutató kódja a három.js V99 legújabb verzióján tesztelték.

 & lt; script src = "libs / hárommin.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. Globális változók hozzáadása

A kódex szkript címkéi között adja hozzá a következő globális változókat, hogy globálisan hozzáférhessen a kamera, a jelenet, a rendezők, az objektumok és a raycaster számára. Add hozzá a TALÁLAT Változó, hogy nyomon kövesse azokat a tárgyakat, amelyeket a kamera tekintetét metszenek. Ez azt mutatja, hogy tudjuk, hogy mit keres a felhasználó VR-ben.

 VAR óra = új három.clock ();
VAR konténer, kamera, jelenet, renderelő, szoba,
crosshair, hit;
var objektumok = []; // objektumok gyűjtése
var szám = 100; // objektumok száma
var raycaster = új három.raycaster (); 

07. Hozzon létre egy 3D-s jelenetet

Egy alap 3D jelenetet fogsz hozzáadni, amely az objektumok tartálya lesz. A jelenet a színpad, amely a kamerával rendelkezik. Az összes 3D prezentáció bizonyos formában vagy színpadon lesz. Mi az ebben a szakaszban és a kamera fényében, amit a felhasználó látni fog. Adja hozzá a következő kódot, hogy hozzáadjon egy jelenetet:

 // scene objektum létrehozása
var jelenet = új három.scene (); 

08. Perspektív kamera hozzáadása

Ezután hozzá kell adnia egy kamerát. A perspektivikus kamerát használod, 3D jelenetekre vonatkozik. Az első attribútum a kamera megtekintése. A második a képarány ( szélesség magasság ). Ezután jelezheti a közel levágó síkot és a távoli vágógörbõsíkokat, amelyek meghatározzák, hogy mi látható a kamera.

 // Kamera létrehozása
kamera = új három.perspectivecamera
(70, ablak.innerwidth / window.innerheight,
0,1, 1000);
jelenet.add (kamera); 

09. Adjon hozzá egy renderelőt és vászon elemet

A renderelő kezeli a jelenetben lévő objektumok rajzát, amelyek láthatóak a fényképezőgéphez. Állítsa be az antialias tulajdonságot, hogy igaz legyen sima élek az objektumon. A renderelő létrehozza a dombelep , ami valójában egy html & lt; vászon & gt; elem. Ezután hozzá kell adnia a testet. MEGJEGYZÉS Az új VR-engedélyezett zászló használata a renderer.

 Renderer = új három.WebglRolerer (
{Antialias: true});
renderer.setpixelRatio (ablak.
DevicePixelRatio);
renderer.setsize (window.innerwidth, ablak.
Innerheight);
renderer.vr.enabled = True;
Dokumentum.Body.appendchild (renderer.
Dombement); 

10. Add hozzá a kamera crosshair-t

Ahhoz, hogy segítsen a felhasználóknak a kamera fókuszpontjára irányulni, jó gyakorlat, hogy hozzáadjon egy keresztezéket vagy célzási ikont a fényképezőgép előtt. Hozzáadhatja közvetlenül a fényképezőgép objektumához, így mindig ott van.

 Crosshair = új három.m.esh (
Új három.Rinnybuffergeometria (0,02, 0,04, 32),
új három.Meshbasicmaterial ({
Szín: 0xffffff,
Opacity: 0,5,
Átlátszó: igaz
})
);
crosshair.position.z = - 2;
camera.add (crosshair); 

11. Hozzon létre VR szobaárat (opcionális)

Ezután hozzon létre egy egyszerű szoba objektumot. Ez jó, ha a VR világban tájékozódhat a felhasználónak. Egy egyszerű szoba dobozt hoz létre, vonalakkal, hogy jelezze a falakat, a padlót és a mennyezetet.

 Szoba = új három.linos (
új három.boxixiometria (6, 6, 6, 10, 10, 10),
Új három.Lehelybasicmaterial ({szín:
0x808080});
szoba.Position.y = 2;
jelenet.add (szoba); 

12. Adjon hozzá fényeket a jelenethez

A jelenet megvilágításához egyszerű félteke fényt és irányjelző fényt használunk. Jó környezeti láthatóságot és reális árnyékot ad egy egységes fényforrásról is.

 Scene.add (új három.hemispherelight
(0x806060, 0x404040)));
VAR Light = Új három.DirektívaLightight
(0xffffff);
light.position.set (1, 1, 1) .normalizálja ();
jelenet.add (fény); 

13. Hozzon létre néhány objektumot

A szobát a következő tárgyakkal fogja kitölteni. Alkalmazza őket véletlenszerűen a szobában. A forgást és a skálát véletlenszerűen is beállíthatja. Hozzáadhat egy kicsit több kódot a következő lépésben, ahol azt mondja Hozzon létre orbit attribútumokat bizonyos egyéni pályák engedélyezéséhez.

 VAR geometria = új három.boxbuffergeometria
(0,15, 0,15, 0,15);
mert (i = 0; i & lt; = num; i ++) {
var anyag = új három.Meshlammbertmaterial
({Color: Math.Random () * 0xffffff});
var objektum = új három.besh
(geometria, anyag);
object.position.set (Math.Random () * 4.0
- 2.0, Math.Random () * 4.0 - 2.0, Math.
Véletlen () * 4.0 - 2.0);
object.scale.set (Math.Random () +. 5, matematika.
Véletlen () +. 5, Math.Random () +. 5);
object.Rotation.set (Math.Random () * 2 *
Math.pi, math.Random () * 2 * math.pi, matematika.
Véletlen () * 2 * Math.pi);
// ORBIT attribútumok létrehozása} 

14. Adjon hozzá orbit attribútumokat az objektumokhoz

Annak érdekében, hogy bizonyos kellemes véletlenszerű mozgást, és tartsa meg az objektumok, hogy meneküljenek a szobából ", hozzárendeljük néhány kezdeti szögadat (radianokban) és távolságot. Lehetővé teszi egy egyszerű módja annak, hogy az objektumok animáljunk a renderhurokban.

// létrehozza az Orbit attribútumokat
// Calc Távolságot állandó és hozzárendelni
tárgy
var a = új három.Vector3 (0, 0, 0);
var b = object.position;
var d = a.distanceto (b);
object.distance = d;
object.radians = math.Random () * 360 * matematika.
Pi / 180; // kezdeti szög
object.radians2 = Math.Random () * 360 * matematika.
Pi / 180; // kezdeti szög
object.radians3 = Math.Random () * 360 * matematika.
Pi / 180; // kezdeti szög
szoba.Add (objektum);
objektumok.Push (objektum); 

15. Adjon hozzá egy ablak átméretezését

Ahogy teszteljük Webvr alkalmazást, átméretezik a képernyőt, mozgatjuk, és így tovább. Jó ötlet, hogy olyan kezelője legyen, amely beállítja a renderterület méretét, és frissíti a dolgokat, hogy megfelelően töltse ki a képernyőt, és jól néz ki.

 ablak.addeventlistener ("átméretezés",
onwindowresize, hamis);
funkció onwindowresize () {
camera.aspect = window.innerwidth / ablak.
Innerheight;
camera.updateProjectmatrix ();
renderer.setsize (window.innerwidth,
ablak.innerheight);
} 

16. Hozza létre a Webvr gombot

A Three.js új webvr osztály tartalmaz egy Webvr gombot, amely kezeli a VR módban bekövetkezett és onnan. Azt is kezeli, ha az eszköz nem támogatja a VR módot. Ezzel az egyszerű kóddal tartalmazhatja:

 // three.js webvr gomb, hogy belépjen /
Vr VR módból való kilépés
document.body.appendchild (webvr.createbutton
(renderer)); 

17. Indítsa el a VR animációs hurkot

Jellemzően a kérdőíves A renderhurok kezelése, de VR-ben egy másik hurokkezelőt kell használnia annak érdekében, hogy minden készen álljon a renderre, és hogy elkerülje a késleltetést és a problémákat. Ehelyett használja az újat setanimationloop és adja át a render funkcióját.

 // Indítsa el a VR animációs hurkot
renderer.setanimationLoop (render); 

18. Hozza létre a render funkciót

Ezután hozzon létre egy render funkciót. Ha nem akarta animálni az objektumokat, vagy tesztelni a kamera / crosshair metsző objektumokkal, akkor csak a következő kódot használhatja:

 Funkció render () {
// Keressen kereszteződéseket
// animálja az objektumokat
// renderelje a jelenetet
renderer.render (jelenet, kamera);
} 

19. Tesztelje a kereszteződéseket

Annak érdekében, hogy az objektumok tesztelését a fényképezőgépből Z-térbe nyomon követhessék, add hozzá a következő kódot a renderhurokhoz, ahol megjegyezte az utolsó lépésben:

 Raycaster.SetFromCamera ({x: 0, Y: 0},
kamera);
var metersects = raycaster.InterSectoBjects
(szoba.children);
ha (metszenek.Length & gt; 0) {
Ha (HIT! = metszi 
 .Object) {
ha (hit) {hit.material.emissive.
Sethex (Hit.Currentex); }
HIT = metszés 
 .Object;
Hit.currentex = hit.material.emissive.
Gethex ();
Hit.material.emissive.shetex (0x00FF00);
}
} más {
Ha (találat) {hit.material.emissive.shetex
(Hit.Currentex); }
HIT = Nincs meghatározva;
} 

20. Az objektumok animálása a pályák mentén

Ezután a fenti kód használatával animálhatja az objektumokat az objektumok mentén:

 az (i = 0; i & lt; = num; i ++) {
var o = objektumok [i];
o.Rotation.y + =. 01;
Ha (i% 2 == 0) {
o.radians + =. 004;
o.radians2 + =. 005;
o.radians3 + =. 008;
} más {
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. Rendezze a webvr-jelenetet

Végül a jelenetet a hasznos funkciók felhasználásával teszi ki. Ha még nem adta hozzá ezt a sort, tegye meg most. Miután hozzáadta ezt, tesztelheti mindent, és látnia kell egy webvr-jelenet megjelenését a böngészőben. Megnézheti a mobileszközön vagy a VR fejhallgatóján is.

 // rendereli a jelenetet
renderer.render (jelenet, kamera); 

Webvr erőforrások

A Webvr elkezdése túlnyomó lehet. Néhány példát találtunk a webvr és az erőforrások használatával, hogy segítsen gördíteni.

Vázlatfab
Valószínűleg már ismeri ezt a webhelyet az Eszközök csodálatos galériája miatt, de van egy Webvr módja is, amely lehetővé teszi a VR-ben való navigációt.

Egy keret
Ez egy kőzet-szilárd keret az AR és a VR számára. Ez kezeli az Ön fájdalmait és az eszköztámogatást az Ön számára, beleértve a teszteléshez való böngészőjének lehetővé tételét. Még a közös 3D objektumok elterjedése is.

Három.js
Ez a könyvtár számos példák a forráskód segítségével, hogy segítsen elérni a Webvr-t. Ez egy tökéletes kiindulópont.

Webvr
Mivel a Webvr egy feltörekvő technológia, jó ötlet, hogy lépést tartson a legújabb fejleményekkel. Tudnia kell, hogy mely eszközök támogatottak és milyen feltételek mellett vannak. Ez az oldal segít naprakészen maradni. Van egy Példákra szánt oldal , is.

És mindig segíti a jogot felhő tároló , is.

Ezt a cikket eredetileg a Creative Web Design magazin 283. kiadásában tették közzé Web designer . Vásároljon kibocsátást 283 vagy Iratkozz fel .

Olvass tovább:

• 7 Bonkers VR trendek az utat
• Kezdje el a Redux Thunk segítségével
• 11 forró web trendek most