{"id":118,"date":"2023-12-02T12:22:29","date_gmt":"2023-12-02T11:22:29","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=118"},"modified":"2023-12-06T10:17:30","modified_gmt":"2023-12-06T09:17:30","slug":"kako-kreirati-3d-portal-za-prijelaz-s-3d-scene-na-drugu-web-stanicu","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/12\/02\/kako-kreirati-3d-portal-za-prijelaz-s-3d-scene-na-drugu-web-stanicu\/","title":{"rendered":"Kako kreirati 3D portal za prijelaz s 3D scene na drugu web stanicu"},"content":{"rendered":"\n

Ukoliko \u017eelite u svoju 3D scenu dodati druge web stranice to mo\u017eete napraviti pomo\u0107u komponente aframe-web-portals<\/code><\/p>\n\n\n\n

Ako \u017eelite koristiti aframe-web-portals<\/code>, slijedite ove korake kako biste integrirali komponentu u svoj A-Frame projekt:<\/p>\n\n\n\n

1. Postavite svoj A-Frame projekt:<\/h3>\n\n\n\n

Prvo, postavite svoj A-Frame projekt ako ve\u0107 niste. To mo\u017eete u\u010diniti stvaranjem HTML datoteke i uklju\u010divanjem A-Frame skripti. Primjer osnovne strukture HTML datoteke:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <title>A-Frame Portal Tutorial<\/title>\n  <script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"><\/script>\n  <!-- Dodajte ostale skripte i biblioteke koje \u017eelite koristiti -->\n<\/head>\n\n<body>\n  <a-scene>\n    <!-- Va\u0161a 3D scena ide ovdje -->\n  <\/a-scene>\n<\/body>\n\n<\/html>\n<\/code><\/pre>\n\n\n\n
2. Dodajte aframe-web-portals<\/code> u svoj projekt:<\/h3>\n\n\n\n
Uklju\u010dite skriptu aframe-web-portals<\/code> u svojoj HTML datoteci. Ako koristite bundler poput Webpack-a, provjerite je li aframe-web-portals<\/code> dodan kao zavisnost u va\u0161em package.json<\/code> i uvezan u va\u0161em kodu.<\/p>\n\n\n\n
<!-- Unutar head sekcije HTML datoteke -->\n    <script src=\"https:\/\/unpkg.com\/aframe-web-portals@1.0.1\/dist\/aframe-web-portals.umd.js\"><\/script>\n<\/code><\/pre>\n\n\n\n
3. Dodajte web portal u svoju A-Frame scenu:<\/h3>\n\n\n\n
Sada mo\u017eete dodati web portal u svoju A-Frame scenu. Primjer:<\/p>\n\n\n\n
      <a-entity\n        position=\"-3 0 -6\"\n        web-portal=\"url:https:\/\/hr.wikipedia.org\/wiki\/Stari_most_u_Mostaru; text:Stari Most;\"\n      ><\/a-entity><\/code><\/pre>\n\n\n\n
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<\/a><\/code>. Tekst “Stari most” \u0107e se prikazati na portalu. Prilagodite URL i tekst prema svojim potrebama.<\/p>\n\n\n\n
Bitno je imati kameru i entitet igra\u010da (playera) u A-Frame sceni kada koristite portal komponentu iz nekoliko razloga:<\/p>\n\n\n\n
    \n
  1. Kamera za Pogled Korisnika:<\/strong>\n
      \n
    • Kamera je osnovni entitet koji odre\u0111uje trenutni pogled korisnika u virtualnom prostoru. Portal komponenta koristi trenutnu kameru kako bi preusmjerila korisnika na drugu scenu ili web stranicu.<\/li>\n\n\n\n
    • Kada korisnik prolazi kroz portal, \u017eelite da nova scena ili web stranica bude prikazana iz njegove perspektive. Kamera omogu\u0107uje pratnju pogleda korisnika tijekom prijelaza.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Kontrole za Kretanje:<\/strong>\n
        \n
      • Player (entitet igra\u010da) obi\u010dno uklju\u010duje komponente za upravljanje kretanjem, poput wasd-controls. Ove kontrole omogu\u0107uju korisnicima da se kre\u0107u po virtualnom prostoru.<\/li>\n\n\n\n
      • Portal komponenta pretpostavlja postojanje entiteta igra\u010da kako bi ispravno prilagodila kretanje korisnika pri prijelazu iz jedne scene u drugu.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Detekcija Sudara:<\/strong>\n
          \n
        • U ovom primjeru, dodan je entitet za detekciju sudara (a-cylinder) kako bi sprije\u010dio prolazak kroz objekte. Kada korisnik poku\u0161a kroz portal, detekcija sudara mo\u017ee sprije\u010diti prolazak kroz stvari koje bi trebale biti neprobojne.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
          Ukratko, kamera i entitet igra\u010da su klju\u010dni za dobar do\u017eivljaj korisnika u virtualnom prostoru. Portal komponenta koristi ove elemente kako bi osigurala glatku tranziciju izme\u0111u razli\u010ditih scena ili web stranica. Bez kamere i entiteta igra\u010da, portal ne bi imao smisla jer korisnik ne bi mogao pratiti prijelaz i do\u017eivjeti virtualni prostor na prirodan na\u010din.<\/p>\n\n\n\n
          Stoga u svoju Aframe scenu dodajte slijede\u0107i kod;<\/p>\n\n\n\n
                <a-entity\n        id=\"player\"\n        position=\"0 1.6 0\"\n        camera\n        wasd-controls=\"acceleration: 15;\"\n        look-controls=\"pointerLockEnabled: false\"\n      >\n        <a-cursor position=\"0 0 -.05\" scale=\".04 .04 1\"><\/a-cursor>\n        <!--For Collision Detection-->\n        <a-cylinder radius=\"0.75\"><\/a-cylinder>\n      <\/a-entity>\n\n\n\n<\/code><\/pre>\n\n\n\n
          Na kraju dodajte sky element. Primjerice;
          <\/p>\n\n\n\n
          \t  <a-sky color=\"blue\";><\/a-sky>\n<\/code><\/pre>\n\n\n\n
          4. Pogledajte svoj projekt:<\/h3>\n\n\n\n
          Otvorite svoj projekt u web pregledniku i trebali biste vidjeti web portal. Kada korisnik pristupi portalu, bit \u0107e preusmjeren na zadanu web stranicu (u ovom slu\u010daju, https:\/\/example.com<\/code>).<\/p>\n\n\n\n
          To bi trebalo biti dovoljno da biste po\u010deli koristiti aframe-web-portals<\/code> u va\u0161em A-Frame projektu. Prilagodite kod prema potrebama va\u0161eg projekta.<\/p>\n\n\n\n
          Ovo je osnovno obja\u0161njenje dijelova koda.<\/p>\n\n\n\n\n