Virtual Reality met Aframe

Libaries toevoegen

Zorg dat de volgende libary is opgenomen in de head van je app/pagina:

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>

Virtual Reality en 3D met Aframe

Opgelet: Aframe werkt enkel online. Je moet het dus eerst uploaden om het te kunnen uittesten. 

Maak een 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.

Een VR-scene toevoegen 

In de body van je document voeg je een 3D-scene toe met de markering . 

<a-scene></a-scene>

Assets met afbeeldingen en andere media 

<a-scene>       
  <a-assets>             
     <img id="space" src="images/melkweg.jpg" draggable="false">       
  </a-assets>       
</a-scene>

De achtergrond wijzigen

Om een achtergrondkleur te geven aan je VR-programma, voeg je de markering toe.

Die lucht kan je een kleur geven: 

<a-scene>
      <a-sky color="#ECECEC"></a-sky>
</a-scene>

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

<a-scene>       
   <a-assets>             
      <img id="space" src="images/melkweg.jpg" draggable="false">       
   </a-assets>       
   <a-sky src="#space">
   </a-sky>     
</a-scene>

Je merkt dat aan een onderdeel 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

Demo: https://www.leerschool.be/api/examples/vrles/002.php

3D-elementen toevoegen

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

<a-scene>
    <a-assets> 
       <img id="space" src="images/melkweg.jpg" draggable="false">
    </a-assets>
    <a-sphere color="#FF0000" radius="1.5">
    </a-sphere>
    <a-sky src="#space">
    </a-sky>
</a-scene>

De markering 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:  https://www.leerschool.be/api/examples/vrles/003.php

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:  https://www.leerschool.be/api/examples/vrles/004.php

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 en 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>