A-Frame je framework temeljen na JavaScriptu koji omogućava izradu virtualnih stvarnosti (VR) aplikacija koje rade u web preglednicima koristeći HTML i WebGL.
Pojašnjenje Svakog Dijela Koda:
- HTML Struktura:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A-Frame Example</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body><!DOCTYPE html>označava početak HTML dokumenta.<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>: Ovdje učitavamo A-Frame biblioteku koja omogućava izradu 3D i VR objekata.
- A-Frame Scena:
<a-scene> ... </a-scene><a-scene>je osnovni kontejner u A-Frame-u. Unutar njega smještamo sve 3D objekte, kamere, svjetla i ostale elemente koje želimo prikazati u virtualnoj stvarnosti.
- Kamera:
<a-camera position="0 1.6 0"></a-camera><a-camera>postavlja kameru u 3D prostoru.position="0 1.6 0"znači da je kamera postavljena na koordinatama(0, 1.6, 0), što simulira visinu čovjeka.
- Zemlja:
<a-plane position="0 0 -5" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane> - Kvadrat:
<a-box position="0 1 -3" rotation="0 45 0" color="#4CC3D9"></a-box><a-box>predstavlja kvadratni objekt u 3D prostoru.position="0 1 -3"postavlja kvadrat na poziciju (0, 1, -3).rotation="0 45 0"rotira kvadrat za 45 stupnjeva oko Y osi.color="#4CC3D9"postavlja boju kvadrata.
- Sfera:
<a-sphere position="2 1 -5" radius="1.25" color="#EF2D5E"></a-sphere><a-sphere>prikazuje sferu u 3D prostoru.position="2 1 -5"postavlja sferu na poziciju (2, 1, -5).radius="1.25"postavlja radijus sfere.color="#EF2D5E"postavlja boju sfere.
- Svjetlo:
<a-light type="directional" position="2 4 -3" intensity="1"></a-light><a-light>dodaje svjetlo u scenu.type="directional"označava da je svjetlo usmjereno u određenom smjeru (poput sunčevih zraka).position="2 4 -3"postavlja svjetlo na poziciju (2, 4, -3).intensity="1"postavlja intenzitet svjetlosti.
Zadatak temeljen na A-Frame Parametrima:
Zadatak: Koristeći A-Frame, kreiraj vlastitu 3D scenu koja uključuje sljedeće elemente:
- Kamera – Postavi kameru na visini osobe, ali je pomakni središnje na X i Y osi.
- Tlo – Dodaj ravnu površinu koja je velika 15×15 i promijeni boju u svijetloplavu.
- Kvadrat – Postavi kvadrat na sredinu scene, rotiraj ga za 45 stupnjeva i promijeni boju u crvenu.
- Sfera – Dodaj sferu iznad tla, postavi je na poziciju (3, 2, -5) i promijeni boju u zlatnu.
- Svjetlo – Postavi svjetlo iznad scene, neka bude bijelo i neka ima srednji intenzitet (0.5).
- Dodaj interakciju – Omogući da korisnik može okrenuti kameru pomoću miša.