Een eerste VR-applicatie

Maak een lege HTML-pagina en voeg aan de HEAD van het document de link toe naar het AFRAME-framework van Mozilla. Die regel zorgt ervoor dat je met een soort van (niet-gestandaardiseerde) HTML-code VR-programma's kan bouwen die zowel op je computer als mobiel en met of zonder VR-bril functioneren.

OPGELET: de voorbeelden werken enkel online, niet offline.

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

In de body van je document voeg je een 3D-scene toe met de markering <a-scene></a-scene>. Om een achtergrondkleur te geven aan je VR-programma, voeg je de markering <a-sky></a-sky> toe.

Demo

De achtergrond wijzigen

Je kan ook een afbeelding toevoegen aan de achtergrond. Het is mogelijk om een "equirectangular" 360°-beeld te gebruiken.

<html>   
    <head>     
        <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>   
    </head>   
    <body>     
        <a-scene>       
            <a-assets>             
                <img id="space" src="images/melkweg.jpg">       
            </a-assets>       
            <a-sky src="#space"></a-sky>     
        </a-scene>   
    </body> 
</html>

Je merkt dat aan <a-scene/> een onderdeel <a-assets></a-assets> is toegevoegd. Daar kan je gewoon links naar afbeeldingen (of 3D-objecten) in opnemen. Belangrijk is dat elke "asset" een uniek ID krijgt. In ons geval krijgt de afbeelding melkweg.jpg uit de map "images" de id="space".
Vervolgens verwijder je de kleur van de "sky" en vervang je die door src="#space". Die #space verwijst naar de id van de afbeelding in <a-assets/>

Demo

3D-elementen toevoegen

We voegen nu een 3D-bol toe aan ons scene.

<html>
    <head>
        <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <a-assets> <img id="space" src="images/melkweg.jpg"> </a-assets>
            <a-sphere color="#FF0000" radius="1.5"></a-sphere>
            <a-sky src="#space"></a-sky>
        </a-scene>
    </body>
</html>

De markering <a-sphere></a-sphere> voegt een 3D-bol toe aan je 3D-scene. Het attribuut "color" geeft de bol elke gewenste kleur. Het attribuut "radius" bepaald de "straal" van de bol.

Demo

Je zal nu merken dat de bol buiten beeld valt. Dat komt omdat we niet hebben ingesteld waar de bol moet verschijnen. Immers: je bevindt je in een 3D-ruimte en elk positie in zo'n ruimte telt 3 coördinaten: x, y en z.

De x-positie geeft aan waar het object zich bevindt horizontaal (van links naar rechts). De y-positie duidt de positie aan vanaf de bovenkant van je scherm. Het z-coördinaat toont aan hoe "diep" een object zich bevindt als je het in "perspectief" zou bekijken.

Je kan de positie van de sphere nu aanpassen door hem het attribuut position="0 0 -10" te geven (resp. x y z). Test maar eens uit.

<a-sphere color="#FF0000" radius="1.5" position="0 0 -10"></a-sphere>

Een negatieve waarde voor z zorgt ervoor dat de bol voor je verschijnt. Een positieve waarde plaatst het object achter je.

Demo

OEFENING 1: plaats nu meerdere bollen op diverse locaties.
OEFENING 2: vervang de kleur door een "src" (zoals bij <a-sky/>) en geef de bol een afbeeldingsvulling.

Navigeren door de VR-ruimte

Op een computer kan je door de VR-ruimte navigeren met je muis of met de pijltjestoetsen. Rechts onderaan vind je een VR-knop om over te schakelen naar volledig scherm.

In principe ben jij het centrum van de "ruimte".
Jij (de kijker) bevindt je op positie x=0, y=0, z=0. Het horizontale vlak geeft de X-waarde weer, het verticale vlak de Y-positie. Evenwijdig met de kijkrichting bevindt zich het Z-vlak.

Virtuele camera

In VR kijk je in theorie door een virtuele camera. Standaard komt de positie van de camera overeen met de kijkrichting van de gebruiker. Je kan de camera net zoals een echte camera ook "roteren" over zijn 3 assen.

Wanneer de gebruiker een VR-bril draagt, komt de kijkrichting overeen met die van de VR-bril. Je kan de positie van de camera wijzigen door aan de scene een camera toe te voegen.

<a-camera position="0 3 -13"></a-camera>

Roteren van objecten of camera

Je kan om het even welk 3D-object of elke camera "roteren" rond zijn x-, y- of z-as.

      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>