Zacznij od WebVR

WebVR jest API JavaScript do tworzenia doświadczeń wirtualnej rzeczywistości 3D w przeglądarce. Wymaga to niskiej opóźnienia, wysokiej szybkości klatek i doskonałej wydajności. Jego celem jest ułatwienie, aby każdy mógł dostać się do doświadczeń VR, obniżenie barier do wejścia.

WebLgl umożliwia programistom tworzenie bogatych, doświadczeń jakości konsoli, które renderują w czasie rzeczywistym na urządzeniach mobilnych i przeglądarkach na pulpicie (po prostu upewnij się, że otrzymasz hosting Prawo do optymalnej możliwości). Prawie uniwersalna przeglądarka i obsługa urządzenia sprawia, że ​​jest to idealne podejście do programistów internetowych, którzy chcą tworzyć niesamowite doświadczenia VR. Tutaj pokazujemy, jak zacząć od Webvr. Na dole tego artykułu znajdziesz pewne przydatne zasoby, aby dalsza twoja wiedza.

W naszym samouczku będziemy korzystać z Webvr w połączeniu z trzy.js.js. - opcja wielu Narzędzia do projektowania stron internetowych. Dostępne dla 3D i VR w sieci. Jest to bezpłatne i otwarte źródło, lekkie i niezliczone nagradzane strony internetowe, których używają. Poza tym, że posiadanie tła javascript można nurkować w tym samouczku bez wcześniejszej wiedzy i tworzyć pierwsze doświadczenie WebVR. Celem tego samouczka jest zacząć i zainspirować Cię do dalszego zwiedzania tej bardzo ekscytującej technologii. Chcesz coś prostszego? Spróbuj A. Kreator strony internetowej .

• Pobierz pliki do tego samouczka z plików

01. Włącz flagę WebVR w Chrome

WebVR jest nadal technologią eksperymentalną i wymaga HTTPS uruchomić na serwerze. Nie uruchomi się na urządzeniach mobilnych bez polyfill.github.com/immersive-web/webvr-polidyfill. . Jednak możesz prowadzić treści lokalnie w Chrome do testowania i budynku. Pamiętaj, aby włączyć flagę WebVR Chrome. Rodzaj Chrome: // Flagi / Enable-Webvr W przeglądarce URL, a następnie kliknij Włącz, aby go aktywować. Może być również konieczne ponowne uruchomienie Chrome.

02. Zainstaluj wtyczkę emulacji API wevvr

Aby przetestować lokalnie na pulpicie i uniknąć potrzeby urządzenia, istnieje świetna wtyczka, której można użyć na Chrome przez ClickTorease. Wtyczka emuluje Zestaw słuchawkowy VR. dla ciebie i pozwól, abyś mógł się poruszać i obrócić zestaw słuchawkowy praktycznie ( Pobierz tutaj ).

03. Otwórz pasek narzędzi urządzeń w narzędziach deweloperskich

Aby emulować urządzenie mobilne lub zestaw słuchawkowy, działa najlepiej, aby korzystać z emulacji urządzenia w narzędziach chromowanych. Otwórz narzędzia deweloperskie w Chrome i przełącz na pasek narzędzi urządzenia, aby zobaczyć widok mobilny, obróć się do krajobrazu i wybierz Ulubioną emulację telefonu.

04. Utwórz podstawowy plik HTML

Następnie musisz skonfigurować podstawowy plik HTML. Można skonfigurować zewnętrzne pliki CSS i pliki JavaScript lub obejmują inline dla prostoty. Three.js 'Klasa renderowania stworzy & lt; płótno & gt; element dla Ciebie. Dodaj następujący kod do swojego index.html. plik:

 HTML Lang = "EN" & GT;
& lt; Head & GT;
& lt; tytuł i GT; Webvr Demo & Title & GT;
& LT; Meta Charset = "UTF-8" & GT;
& LT; Meta Name = "vesport" Content =
"Szerokość = szerokość urządzenia, skala początkowa =
1.0, User-Skalable = No "& GT;
& lt; style & gt;
html, ciało {margines: 0; Wyściółka: 0;
Przepełnienie: Ukryte; }
& LT; / Style & GT;
& LT; / Head & GT;
& lt; body & gt;
& lt; script & gt;
// kod przejdzie tutaj
& lt; / script & gt;
& LT; / Body & GT; 

05. Dołącz klasy trzech.js

Dołącz link do biblioteki Three.js w głowie pliku - albo hostowany zewnętrznie, albo pobierz go z repozytorium trzech.js. Potrzebny będzie również nową klasę klas Webvr i klasę BoxLeometry w tym samouczku. Możesz znaleźć klasy biblioteki i wspieranie tutaj . Uwaga: Kod w tym samouczku został przetestowany na najnowszej wersji trzech.js v99.

 Skrypt SRC = "Libs / three.min.js" & GT; & LT; / Script & GT;
& lt; script src = "libs / webvr.js" & script & lt;
& lt; script src = "libs / boxlinegeometry.js" & gt;
& lt; / script & gt; 

06. Dodaj zmienne globalne

Pomiędzy znacznikami skryptów dla kodu, dodaj następujące zmienne globalne do globalnego dostępu do kamery, sceny, renderuje, obiekty i Raycaster. Dodaj również A. TRAFIENIE zmienna do śledzenia obiektów, które są przecinane przez spojrzenie kamery. Demonstruje to, jak wiedzieć, na co użytkownik patrzy na VR.

 Var Clock = Nowy Three.Clock ();
var pojemnik, kamera, scena, renderator, pokój,
Crosshair, Hit;
var obiekty = []; // Kolekcja obiektów
var num = 100; // Liczba obiektów
var raymaster = nowy trzy.raycaster (); 

07. Utwórz scenę 3D

Dodasz podstawową scenę 3D, która będzie kontenerem dla Twoich obiektów. Scena jest etapem, który będzie renderować z kamerą. Wszystkie prezentacje 3D będą miały scenę lub etap jakiejś formy. Co znajduje się na tym etapie i z widokiem na kamerę zobaczy użytkownika. Dodaj następujący kod, aby dodać scenę:

 // Utwórz obiekt sceny
var scene = nowy trzy.scene (); 

08. Dodaj kamerę perspektywy

Następnie musisz dodać kamerę. Użyjesz aparatu perspektywy, przeznaczonego do scen 3D. Pierwszym atrybutem jest pole widzenia kamery. Drugi jest współczynnikiem aspektu ( szerokość wysokość ). Następnie możesz wskazać bliski płaszczyzny przycinającego i odległości wycinające się odległości, które definiują, co ma być widoczne dla kamery.

 // Utwórz kamerę
aparat = nowy trzy.perspeckeCamera
(70, window.innerwidth / window.innerheight,
0,1, 1000);
scena.add (aparat); 

09. Dodaj element renderujący i płótno

Render obsługuje rysunek obiektów w swojej scenie widocznej dla kamery. Ustaw nieruchomość Antialias, aby uzyskać gładkie krawędzie na obiekcie. Render tworzy domIE , co jest właściwie html & lt; płótno & gt; element. Następnie możesz dołączyć do ciała. Zwróć uwagę na użycie nowej flagi z obsługą VR renderer.

 Render = Nowy Three.Webglmrenderer (
{Antialas: True});
render.setpixelratio (okno.
devicepixelratio);
Render.Setize (window.innerwidth, okno.
innerheight);
render.vr.enabled = true;
dokument.body.appendChild (Render.
domIEMEMENT); 

10. Dodaj Crosshair Camera

Aby pomóc użytkownikom orientować się na punkcie ostrości aparatu, jest dobrą praktyką, aby dodać ikonę Crosshair lub kierowanie przed kamerą. Możesz dodać go bezpośrednio do obiektu kamery, więc zawsze jest to miejsce.

 Crosshair = Nowy Three.mesh (
Nowy trzy.Ringbuffergeometry (0,02, 0,04, 32),
Nowy Three.meshbasicMaterial ({
Kolor: 0xfffff,
nieprzezroczystość: 0,5,
Przezroczysty: True.
})
);
crosshair.position.Z = - 2;
aparat.add (Crosshair); 

11. Utwórz obiekt pokoju VR (opcjonalnie)

Następnie utwórz prosty obiekt pokojowy. Miło jest dać użytkownikowi poczucie orientacji w świecie VR. Tworzy proste pole z liniami, aby wskazać ściany, podłogę i sufit.

 Room = Nowe trzy.linki (
Nowy Three.Box Olaygeometry (6, 6, 6, 10, 10, 10),
Nowy Three.lineBasicMaterial ({Color:
0x808080}));
Room.position.y = 2;
scena.Add (pokój); 

12. Dodaj światła do sceny

Aby zapalić scenę, użyjemy prostego światła półkuli i światła kierunkowego. Dałoby miłą widoczność otoczenia i niektóre realistyczne cieniowanie z jednolitego źródła światła.

 Scene.add (nowy trzy.Hemispherelight
(0x806060, 0x404040));
var light = nowy trzy.directionalight
(0xFFFFFF);
Light.position.set (1, 1, 1) .Normalizuje ();
scena.add (światło); 

13. Utwórz niektóre obiekty

Zamierzasz wypełnić pokój z obiektami dalej. Zastosuj je losowo wokół pokoju. Ustawiesz rotacji i skali losowo dla różnorodności. Możesz dodać trochę więcej kodu w następnym kroku, gdzie mówi Utwórz atrybuty orbita Aby włączyć niestandardowe ścieżki orbity.

 Var Geometria = Nowy Three.BoxBuffergeometry
(0,15, 0,15, 0,15);
dla (i = 0; i & lt; = num; i ++) {
Var Material = Nowy Three.MeslambertMaterial
({kolor: math.random () * 0xffffff});
var obiekt = nowy trzy.mesh
(geometria, materiał);
obiekt.position.set (math.random () * 4.0
- 2.0, math.random () * 4.0 - 2.0, matematyka.
losowo () * 4.0 - 2,0);
object.Scale.set (math.random () +. 5, matematyka.
losowo () +. 5, math.random () +. 5);
obiekt.rotation.set (math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, matematyka.
losowo () * 2 * math.pi);
// Utwórz atrybuty orbita} 

14. Dodaj atrybuty orbity do obiektów

Aby włączyć jakiś ładny ruch w orbicie i zachować obiekty z "ucieczki do pokoju", przypisujemy niektóre dane kątowe (w radianach) i odległości. Umożliwia prosty sposób na animowanie obiektów w pętli renderowania po.

// Utwórz atrybuty orbita
// Calc Dystans jako stały i przypisany do
obiekt
var a = nowy trzy.vector3 (0, 0, 0);
var b = obiekt.pozycja;
var d = a.distancento (b);
obiekt.distance = d;
obiekt.Radians = math.random () * 360 * Matematyka.
PI / 180; // Kąt początkowego
obiekt.Radians2 = math.random () * 360 * Matematyka.
PI / 180; // Kąt początkowego
obiekt.Radians3 = math.random () * 360 * Matematyka.
PI / 180; // Kąt początkowego
pokój.Add (obiekt);
obiekty.push (obiekt); 

15. Dodaj przewóz rozmiaru okna

Gdy przetestujemy naszą aplikację Webvr, zmienimy rozmiar ekranu, przesuwając go wokół i tak dalej. Dobrym pomysłem jest posiadanie przewodów, który dostosowuje wymiary obszaru renderowania i aktualizuje rzeczy, aby prawidłowo wypełnić ekran i wyglądać ładnie.

 Window.addeventlistener ("Zmień rozmiar",
onwindowreseize, false);
Funkcja OnWindowreseize () {
camera.aspect = window.innerwidth / okno.
Innerheight;
camera.updateProjeniaMatrix ();
render.setyze (window.innerwidth,
window.innerheight);
} 

16. Utwórz przycisk WebVR

Nowa klasa WebVR Three.JS zawiera przycisk WebVR, który obsługuje przełączanie się w trybie VR i poza VR dla nas. Umożliwia również obsługę, jeśli urządzenie nie obsługuje trybu VR. Możesz go dołączyć za pomocą tego prostego kodu:

 // Three.js Webvr przycisk, aby wejść /
Wyjdź z trybu VR.
Document.body.appendChild (Webvr.createButton.
(Render)); 

17. Rozpocznij pętlę animacji VR

Zazwyczaj używałbyś ŻądanieFrame. Aby poradzić sobie z pętli renderowania, ale w VR musisz użyć innej obsługi pętli, aby upewnić się, że wszystko jest gotowe do renderowania i że unikasz opóźnienia i renderowania problemów. Zamiast tego użyj nowego setanimationloop. i przejść w funkcję renderowania.

 // Uruchom pętlę animacji VR
render.setanimationLoop (render); 

18. Utwórz funkcję renderowania

Następnie utwórz funkcję renderowania. Jeśli nie chcesz animować obiektów ani testu do aparatu / Crosshair przecinające się obiektami, możesz użyć następującego kodu:

 Funkcja Render () {
// Znajdź skrzyżowania
// animuj obiekty
// renderuj scenę
Render.Render (scena, aparat);
} 

19. Test dla skrzyżowań

Aby umożliwić testowanie obiektów przecinających promień śledzony z aparatu do przestrzeni z przestrzeni, dodaj następujący kod do pętli renderowania, w której skomentowałeś go w ostatnim kroku:

 Raycaster.setFromCamera ({X: 0, Y: 0},
aparat fotograficzny );
var przecina = raycaster.interseckjects
(Room.children);
Jeśli (przecinki.length & gt; 0) {
Jeśli (hit! = przecina 
 .Object) {
Jeśli (hit) {hit.material.EMissive.
Sethex (hit.currenthex); }
Hit = przecinki 
 .Object;
Hit.currenthex = hit.Material.EMissive.
Gethex ();
Hit.Material.emissive.sethex (0x00ff00);
}
} else {
Jeśli (hit) {hit.material.emissive.setex
(Hit.currethex); }
Hit = niezdefiniowany;
} 

20. Animuj obiekty wzdłuż orbitów

Następnie możesz animować obiektów wzdłuż ścieżek orbitycznych za pomocą tego kodu:

 Dla (i = 0; i & lt; = num; i ++) {
var o = obiekty [i];
o.rotation.y + =. 01;
Jeśli (I% 2 == 0) {
O.Radians + =. 004;
O.Radians2 + =. 005;
O.Radians3 + =. 008;
} else {
O.Radians - = 0, 006;
o.Radians2 - = 0, 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 Scena WebVR

Wreszcie możesz sprawdzić swoją scenę za pomocą odpowiednio funkcji renderowania. Jeśli nie dodałeś już tej linii, zrób to teraz. Po dodaniu tego możesz przetestować go wszystko i powinno zobaczyć renderowanie sceny WebVR w przeglądarce. Możesz także sprawdzić go na urządzeniu mobilnym lub zestawie słuchawkowym VR.

 // renderuj scenę
Render.Render (scena, aparat); 

Zasoby WebVR.

Pierwsze kroki w Webvr może być przytłaczający. Zgromadziliśmy kilka przykładów witryn za pomocą WebVR i zasobów, aby pomóc Ci się toczyć.

Sketchfab.
Prawdopodobnie znasz już tę stronę ze względu na niesamowitą galerię aktywów, ale ma również tryb Webvr, który umożliwia nawigację w VR.

Ramka
Jest to ramy solidne ramy dla AR i VR. Obsługuje dla Ciebie bóle bólu oparcia i obsługi urządzenia, w tym umożliwiając renderowanie w przeglądarce do testowania. Nawet abstracje wyrażenia tworzenia wspólnych obiektów 3D.

Trzy.js.js.
Ta biblioteka ma liczne Przykłady. z kodem źródłowym, aby pomóc w poszukiwaniu WebVR. To idealny punkt wyjścia.

Webver.
Ponieważ Webvr jest wschodzącą technologią Dobrym pomysłem, aby nadążyć za najnowszymi zmianami. Musisz wiedzieć, które urządzenia są obsługiwane i w jakich warunkach. Ta strona pomoże Ci być na bieżąco. Jest A. strona dedykowana do przykładów , zbyt.

I zawsze pomaga mieć prawo magazyn w chmurze , zbyt.

Ten artykuł został pierwotnie opublikowany w wydaniu 283 Magazynu kreatywnego projektowania stron internetowych Projektant stron internetowych . Kup problem 283. lub Subskrybuj .

Czytaj więcej:

• 7 Bonkers VR Trends zmierzają na swój sposób
• Zacznij od Redux Thunk
• 11 Hot Web Trends już teraz