Pogledajte kako kreirati 3D scene na internetu
Programiranje

Pogledajte kako kreirati 3D scene na internetu

e-Hercegovina

Dobrodošli u svijet kodiranja!

Ako ste oduvijek sanjali o tome da postanete programer, ali ne znate odakle početi, na pravom ste mjestu.

Pogledajte dio tečaja za učenje kodiranja.

 

Da biste omogućili rotaciju kamere u A-Frame sceni, možete koristiti komponentu look-controls. Ova komponenta pruža osnovne kontrolne funkcije, uključujući rotaciju kamere.

Evo kako možete ažurirati vašu A-Frame scenu kako biste omogućili rotaciju kamere:

  1. Dodajte look-controls komponentu kamere:
<a-entity position="0 1 -4" camera look-controls> <a-text value="Stari most u Mostaru" color="yellow" align="center"></a-text> </a-entity>
  1. Ako želite automatsku rotaciju kamere oko svoje osi, možete dodati komponentu rotation na kamere s animacijom. Evo kako to možete učiniti:

<a-entity position="0 1 -4" camera look-controls rotation="0 0 0" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"> <a-text value="Stari most u Mostaru" color="yellow" align="center"></a-text> </a-entity>

U ovom primjeru, animation komponenta dodaje animaciju rotacije kamere. Parametar property: rotation označava da se animira svojstvo rotacije kamere, to: 0 360 0 postavlja krajnju rotaciju (u ovom slučaju, pun krug oko Y osi), loop: true omogućuje beskonačno ponavljanje animacije, a dur: 10000 postavlja trajanje animacije na 10 sekundi.

Prilagodite vrijednosti prema svojim potrebama. Ovaj primjer će uzrokovati automatsku rotaciju kamere oko Y osi svakih 10 sekundi.

Da biste omogućili korisniku da kasnije sam pregledava 3D scenu nakon završetka automatske rotacije, možete prilagoditi kod za kontrolu rotacije kamere.

Evo korak po korak uputa kako prilagoditi kameru

    <a-entity id="cameraEntity" position="0 3 20" rotation="0 90 0" camera look-controls wasd-controls animation__rotation="property: rotation; to: 0 0 0; dur: 3000"></a-entity>

Ovaj kod koristi animation__rotation kako bi postavio početnu rotaciju kamere na 0 90 0 (gledanje prema istoku) i zatim postavio animaciju rotacije kamere na 0 0 0 (gledanje prema sjeveru) s trajanjem od 3 sekunde.

Sada, korisnik može koristiti kontrole WASD za pomicanje kamere i miš za promjenu smjera gledanja. Animacija rotacije kamere automatski će se pokrenuti kad se stranica učita.

Koraci:

  1. a-entity Element s Kamerom: Element a-entity sadrži kameru (camera). position postavlja početnu poziciju kamere, a rotation postavlja početnu rotaciju kamere.
  2. look-controls i wasd-controls: look-controls omogućuje korisnicima upravljanje smjerom gledanja putem miša, a wasd-controls omogućuje pomicanje kamere koristeći tipke W, A, S, D.
  3. animation__rotation: Ovaj atribut postavlja animaciju rotacije kamere. property: rotation označava da se animira svojstvo rotacije kamere, to: 0 0 0 postavlja krajnju rotaciju (gledanje prema sjeveru), dur: 3000 postavlja trajanje animacije na 3 sekunde.

S ovim kodom, kamere će se automatski rotirati prema sjeveru tijekom prvih 3 sekunde, a zatim će korisnik moći koristiti miša i tipke za pomicanje i daljnje upravljanje kamerom.

Vidi više lekcija

Više