Evo jednostavnog zadatka koji će vam pomoći da razumijete kako mijenjati boje i pozicije 3D elemenata:
Zadatak: Promjena boje i pozicije 3D elemenata
Cilj zadatka je stvoriti 3D scenu koja se sastoji od tri različita objekta – kutije (box), sfere (sphere) i valjka (cylinder). Svaki objekt treba imati različitu boju i poziciju.
- Korak 1: Uključivanje A-Frame biblioteke
- Dodajte sljedeći redak koda na početak vaše HTML datoteke kako biste uključili A-Frame biblioteku:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Moj prvi 3D svijet</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> - Korak 2: Stvaranje 3D scene
- Dodajte sljedeći kod ispod otvaranja tijela (
<body>) kako biste stvorili svoju prvu 3D scenu:
<a-scene> <a-box position="0 1 -3" rotation="0 45 0" color="red"></a-box> <a-sphere position="2 1 -5" radius="1" color="blue"></a-sphere> <a-cylinder position="-2 1 -5" radius="0.5" height="2" color="green"></a-cylinder> </a-scene> - Ovaj kod će stvoriti 3 oblika – kutiju (box), sferu (sphere) i valjak (cylinder) – i postaviti ih u 3D svemiru. Svaki oblik ima različite svojstva kao što su boja, pozicija i rotacija.
- Prvo, promijenite boje objekata. Dodajte atribut
colorsvakom objektu i promijenite boju na nešto drugo. Na primjer, možete postaviti kutiju (box) na žutu boju, sferu (sphere) na crvenu, a valjak (cylinder) na plavu.
<a-box position="0 1 -3" rotation="0 45 0" color="yellow"></a-box>
<a-sphere position="2 1 -5" radius="1" color="red"></a-sphere>
<a-cylinder position="-2 1 -5" radius="0.5" height="2" color="blue"></a-cylinder>
- Zatim, promijenite poziciju objekata. Pokušajte postaviti objekte na različite pozicije u 3D prostoru tako da se ne preklapaju. Na primjer, možete postaviti kutiju (box) na poziciju
(0 1 -3), sferu (sphere) na poziciju(2 1 -5)i valjak (cylinder) na poziciju(-2 1 -5). - Spremite svoju HTML datoteku i otvorite je u svom web pregledniku. Pogledajte kako se boje i pozicije objekata promijenile u 3D sceni.
- Pokušajte sada eksperimentirati s različitim bojama i pozicijama kako biste stvorili svoj jedinstveni 3D svijet. Možete dodati više objekata ili promijeniti njihove veličine i rotacije kako biste dodali više kreativnosti u svoju scenu.
Ovaj zadatak će vam pomoći da praktično primijenite svoje znanje o promjeni boja i pozicija 3D elemenata u A-Frame-u.
Nakon što završite zadatak, možete eksperimentirati s raznim kombinacijama boja i pozicija kako bi stvorili svoje jedinstvene 3D svjetove.
Leave a Reply