E vo jednostavnog tutoriala za postavljanje teksta na A-Frame scenu za početnike.
Kao što je već navedeno, A-Frame je HTML okvir za kreiranje 3D i virtualne stvarnosti sadržaja. Ovaj primer će koristiti A-Frame zajedno sa HTML i dodati natpis s tekstom na scenu.
1. Inicijalizacija HTML dokumenta:
Klikni na kod da ga kopiraš.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>A-Frame Tutorial</title>
<!-- Import A-Frame library -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body>2. Dodajte A-Frame scenu:
<!-- A-Frame Scene -->
<a-scene>
<!-- Postavite kameru --> <a-entity position="0 1.6 0"> <a-camera></a-camera> </a-entity>3. Dodajte tekstualni entitet:
<!-- Dodajte tekstualni entitet -->
<a-entity position="0 1 -4"> <a-text value="Hello, World!" color="black" align="center"></a-text> </a-entity> </a-scene> </body> </html>4. Zatvaranje HTML dokumenta:
</html>5. Rezultat:
Ovaj primer kreira A-Frame scenu s tekstom “Hello, World!” postavljenim na sredini scene. Tekstualni entitet je dodat s <a-text> komponentom, a njegove osobine su postavljene putem atributa.
6. Pokrenite vaš HTML dokument:
Spremite ovo kao HTML datoteku (npr. index.html) i otvorite je u web pregledniku. Očekivali biste videti A-Frame scenu s tekstom na sredini.
Ovaj primer je osnovan i pruža osnovnu predstavu o tome kako koristiti tekst u A-Frame sceni. Možete dalje istraživati A-Frame dokumentaciju kako biste saznali više o naprednijim funkcijama i mogućnostima.
Ili možete zalijepiti kod u uređivač koda kako bi vidjeli rezultat.
Ovo može biti vrlo korisno za dodavanje teksta na 3D scene, a možete tako primjerice urediti dio koda dole kako bi dodali natpis “Stari most u Mostaru”.
Evo korak-po-korak tutoriala kako urediti tekst u A-Frame sceni kako biste postigli bolji rezultat:
- Dodajte tekst u A-Frame sceni:
<a-text value="Stari Most u Mostaru" position="-2.5 1.25 -1.5" rotation="0 15 0" color="black"></a-text>Ovaj korak dodaje osnovni tekst bez dodatnih stilskih ili font atributa.
- Dodajte
fontatribut za postavljanje fonta:
<a-text font="exo2bold"
value="Stari Most u Mostaru"
position="-2.5 1.25 -1.5"
rotation="0 15 0" ></a-text>U ovom koraku dodajemo font atribut kako bismo postavili određeni font (u ovom slučaju, “exo2bold”). Pobrinite se da imate pristup ili učitajte željeni font.
- Dodajte
widthatribut za postavljanje širine teksta:
<a-text
font="exo2bold"
value="Stari Most u Mostaru"
width="24"
position="-2.5 1.25 -1.5"
rotation="0 15 0" ></a-text>Ovaj korak postavlja širinu teksta na 24 jedinice. Prilagodite ovu vrijednost prema potrebama vašeg dizajna.
- Rezultat:
Kada kombinirate sve ove korake, dobit ćete kôd koji izgleda ovako:
<a-text
font="exo2bold"
value="Stari Most u Mostaru"
width="24" position="-2.5 1.25 -1.5"
rotation="0 15 0" ></a-text>Sada imate tekst u A-Frame sceni s određenim fontom, širinom i pozicijom. Prilagodite vrijednosti prema vašim preferencijama kako biste postigli željeni izgled.
Leave a Reply