Ukoliko želite u svoju 3D scenu dodati druge web stranice to možete napraviti pomoću komponente aframe-web-portals
Ako želite koristiti aframe-web-portals, slijedite ove korake kako biste integrirali komponentu u svoj A-Frame projekt:
1. Postavite svoj A-Frame projekt:
Prvo, postavite svoj A-Frame projekt ako već niste. To možete učiniti stvaranjem HTML datoteke i uključivanjem A-Frame skripti. Primjer osnovne strukture HTML datoteke:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A-Frame Portal Tutorial</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<!-- Dodajte ostale skripte i biblioteke koje želite koristiti -->
</head>
<body>
<a-scene>
<!-- Vaša 3D scena ide ovdje -->
</a-scene>
</body>
</html>
2. Dodajte aframe-web-portals u svoj projekt:
Uključite skriptu aframe-web-portals u svojoj HTML datoteci. Ako koristite bundler poput Webpack-a, provjerite je li aframe-web-portals dodan kao zavisnost u vašem package.json i uvezan u vašem kodu.
<!-- Unutar head sekcije HTML datoteke -->
<script src="https://unpkg.com/aframe-web-portals@1.0.1/dist/aframe-web-portals.umd.js"></script>
3. Dodajte web portal u svoju A-Frame scenu:
Sada možete dodati web portal u svoju A-Frame scenu. Primjer:
<a-entity
position="-3 0 -6"
web-portal="url:https://hr.wikipedia.org/wiki/Stari_most_u_Mostaru; text:Stari Most;"
></a-entity>Ovaj primjer dodaje web portal koji vodi na stranicu Wikipedije koja govori o Starom mostu u Mostaru, https://hr.wikipedia.org/wiki/Stari_most_u_Mostaru. Tekst “Stari most” će se prikazati na portalu. Prilagodite URL i tekst prema svojim potrebama.
Bitno je imati kameru i entitet igrača (playera) u A-Frame sceni kada koristite portal komponentu iz nekoliko razloga:
- Kamera za Pogled Korisnika:
- Kamera je osnovni entitet koji određuje trenutni pogled korisnika u virtualnom prostoru. Portal komponenta koristi trenutnu kameru kako bi preusmjerila korisnika na drugu scenu ili web stranicu.
- Kada korisnik prolazi kroz portal, želite da nova scena ili web stranica bude prikazana iz njegove perspektive. Kamera omogućuje pratnju pogleda korisnika tijekom prijelaza.
- Kontrole za Kretanje:
- Player (entitet igrača) obično uključuje komponente za upravljanje kretanjem, poput wasd-controls. Ove kontrole omogućuju korisnicima da se kreću po virtualnom prostoru.
- Portal komponenta pretpostavlja postojanje entiteta igrača kako bi ispravno prilagodila kretanje korisnika pri prijelazu iz jedne scene u drugu.
- Detekcija Sudara:
- U ovom primjeru, dodan je entitet za detekciju sudara (a-cylinder) kako bi spriječio prolazak kroz objekte. Kada korisnik pokuša kroz portal, detekcija sudara može spriječiti prolazak kroz stvari koje bi trebale biti neprobojne.
Ukratko, kamera i entitet igrača su ključni za dobar doživljaj korisnika u virtualnom prostoru. Portal komponenta koristi ove elemente kako bi osigurala glatku tranziciju između različitih scena ili web stranica. Bez kamere i entiteta igrača, portal ne bi imao smisla jer korisnik ne bi mogao pratiti prijelaz i doživjeti virtualni prostor na prirodan način.
Stoga u svoju Aframe scenu dodajte slijedeći kod;
<a-entity
id="player"
position="0 1.6 0"
camera
wasd-controls="acceleration: 15;"
look-controls="pointerLockEnabled: false"
>
<a-cursor position="0 0 -.05" scale=".04 .04 1"></a-cursor>
<!--For Collision Detection-->
<a-cylinder radius="0.75"></a-cylinder>
</a-entity>
Na kraju dodajte sky element. Primjerice;
<a-sky color="blue";></a-sky>
4. Pogledajte svoj projekt:
Otvorite svoj projekt u web pregledniku i trebali biste vidjeti web portal. Kada korisnik pristupi portalu, bit će preusmjeren na zadanu web stranicu (u ovom slučaju, https://example.com).
To bi trebalo biti dovoljno da biste počeli koristiti aframe-web-portals u vašem A-Frame projektu. Prilagodite kod prema potrebama vašeg projekta.
Ovo je osnovno objašnjenje dijelova koda.
HTML Doctype i Osnovne Postavke
<!DOCTYPE html>: Deklaracija HTML doctype-a.<html>: Otvoravanje HTML elementa.
Head Sekcija
<head>: Otvoravanje head sekcije HTML dokumenta.<meta charset="utf-8" />: Postavljanje znakovnog skupa na UTF-8.<title>Example 1</title>: Postavljanje naslova web stranice.- A-Frame i aframe-web-portals Skripte:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>: Uključivanje A-Frame skripte. A-Frame je okvir za razvoj virtualne stvarnosti.<script src="https://unpkg.com/aframe-web-portals@1.0.1/dist/aframe-web-portals.umd.js"></script>: Uključivanje aframe-web-portals skripte koja omogućava kreiranje portala na druge web stranice.
Body Sekcija
<body>: Otvoravanje body sekcije HTML dokumenta.- A-Frame Scena:
<a-scene>: Otvoravanje A-Frame scene.
Kamera i Kontrole
- Camera Entity:
<a-entity id="player" position="0 1.6 0" camera wasd-controls="acceleration: 15;" look-controls="pointerLockEnabled: false">: Definiranje entiteta kamere s ID-om "player". Postavljanje pozicije, dodavanje komponenti kamere i kontrola pokreta pomoću wasd-controls. Ovdje se također onemogućuju look-controls pomoćupointerLockEnabled: false.- Cursor Entity:
<a-cursor position="0 0 -.05" scale=".04 .04 1"></a-cursor>: Dodavanje entiteta kursora. Kursor se koristi za interakciju u A-Frame sceni.
- Collision Detection Entity:
<a-cylinder radius="0.75"></a-cylinder>: Dodavanje cilindra kao elementa za detekciju sudara. Ovo se često koristi kako bi se spriječilo prolazak kroz objekte u virtualnom prostoru.
Portali
- Portal Entities:
<a-entity position="-3 0 -6" web-portal="url:https://hr.wikipedia.org/wiki/Stari_most_u_Mostaru; text:Stari most u Mostaru;"></a-entity>: Definiranje entiteta portala s određenom pozicijom, koji vodi na "https://hr.wikipedia.org/wiki/Stari_most_u_Mostaru" i ima tekst "Stari most u Mostaru".
Zatvaranje HTML Dokumenta
</a-scene>: Zatvaranje A-Frame scene.</body>: Zatvaranje body sekcije.</html>: Zatvaranje HTML dokumenta.
Leave a Reply