{"id":237,"date":"2023-12-04T14:13:56","date_gmt":"2023-12-04T13:13:56","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=237"},"modified":"2023-12-06T10:17:50","modified_gmt":"2023-12-06T09:17:50","slug":"kako-napraviti-virtualne-3d-ture-u-aframe-radnom-okviru","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/12\/04\/kako-napraviti-virtualne-3d-ture-u-aframe-radnom-okviru\/","title":{"rendered":"Kako napraviti virtualne 3D ture u Aframe radnom okviru?"},"content":{"rendered":"\n<p>U dana\u0161njem digitalnom dobu, tehnolo\u0161ki napredak omogu\u0107ava nam da pro\u0161irimo horizonte na\u010dina na koji do\u017eivljavamo svijet. Jedna od najinovativnijih tehnologija koja se isti\u010de u ovom podru\u010dju su 3D scene.<\/p>\n\n\n\n<p>Kroz njih, promocija turizma, kulturnih vrijednosti te drugih aspekata kreiranja sadr\u017eaja postaje vi\u0161e nego samo gledanje slika na ekranu \u2013 postaje interaktivno iskustvo koje osvaja srca i umove.<\/p>\n\n\n\n<p>U primjerima ispod nau\u010diti \u0107ete kako napraviti jednostavnu trodimenzionalnu turu za obilazak odre\u0111enih lokacija. <br><\/p>\n\n\n\n<p>Ovo mo\u017ee biti vrlo korisno u promociji turisti\u010dkih destinacija. <\/p>\n\n\n\n<p><strong>Inicijalizacija HTML-a:<\/strong><\/p>\n\n\n\n<ul>\n<li>Stvorite HTML datoteku i uklju\u010dite A-Frame biblioteku.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"utf-8\"&gt;\n  &lt;title&gt;Change Sky Image on Entity Click&lt;\/title&gt;\n  &lt;meta name=\"description\" content=\"A-Frame Example\"&gt;\n  &lt;script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;!-- A-Frame scena --&gt;\n  &lt;a-scene cursor=\"rayOrigin: mouse\"&gt;\n    &lt;!-- Ostatak koda \u0107e biti dodan ovdje --&gt;\n  &lt;\/a-scene&gt;\n\n  &lt;!-- Skripta za manipulaciju A-Frame scenom --&gt;\n  &lt;script&gt;\n    \/\/ JavaScript kod \u0107e biti dodan ovdje\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p> <\/p>\n\n\n\n<p><strong>Dodavanje Skyboxa:<\/strong><\/p>\n\n\n\n<ul>\n<li>Dodajte <code>&lt;a-sky&gt;<\/code> element unutar A-Frame scene kako biste postavili po\u010detni izvor slike za skybox.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a-sky id=\"skybox\" src=\"https:\/\/3dkodiranje.com\/wp-content\/uploads\/2023\/11\/Realism_equirectangular-jpg_stari_most_u_Mostaru_1639036364_9544749-1024x512.jpg\"&gt;&lt;\/a-sky&gt;\n\n\n<\/code><\/pre>\n\n\n\n<p><strong>Dodavanje Kamere i Raycastera:<\/strong><\/p>\n\n\n\n<ul>\n<li>Dodajte <code>&lt;a-camera&gt;<\/code> element unutar scene s <code>&lt;a-entity&gt;<\/code> za raycaster kako biste omogu\u0107ili kursoru zra\u010denje iz kamere.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a-camera position=\"0 1.6 0\"&gt;\n  &lt;a-entity visible=\"false\" raycaster=\"objects: .clickable\"&gt;&lt;\/a-entity&gt;\n&lt;\/a-camera&gt;\n\n\n\n<\/code><\/pre>\n\n\n\n<p><strong>Dodavanje Klikabilnog Elementa:<\/strong><\/p>\n\n\n\n<ul>\n<li>Dodajte <code>&lt;a-box&gt;<\/code> kao klikabilni element koji \u0107e mijenjati izvor slike na svaki klik.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a-box class=\"clickable\" position=\"0 1 -5\" color=\"blue\"&gt;&lt;\/a-box&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>Dodavanje JavaScript Koda:<\/strong><\/p>\n\n\n\n<ul>\n<li>Dodajte JavaScript kod unutar <code>&lt;script&gt;<\/code> bloka koji \u0107e omogu\u0107iti promjenu izvora slike na klik na klikabilni element.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n  var skybox = document.getElementById(\"skybox\");\n  var clickableEntity = document.querySelector('.clickable');\n  var isImage1 = true;\n\n  \/\/ Dodajte event listener na entitet koji je klikabilan\n  clickableEntity.addEventListener('click', function () {\n    toggleSkyImage();\n  });\n\n  function toggleSkyImage() {\n    \/\/ Promijeni izvor slike na temelju trenutnog stanja\n    if (isImage1) {\n      skybox.setAttribute('src', 'https:\/\/i.imgur.com\/5tSSa8Ub.jpg');\n    } else {\n      skybox.setAttribute('src', 'https:\/\/3dkodiranje.com\/wp-content\/uploads\/2023\/11\/Realism_equirectangular-jpg_stari_most_u_Mostaru_1639036364_9544749-1024x512.jpg');\n    }\n\n    \/\/ Invertiraj trenutno stanje\n    isImage1 = !isImage1;\n  }\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Sada imate potpuni kod koji mijenja izvor slike na klik na entitet. Kopirajte ovaj kod u HTML datoteku i otvorite je u pregledniku da biste vidjeli rezultat.<\/p>\n\n\n\n<!-- partial:index.partial.html -->\n  <iframe style=\"width:100%; height:500px;\" id=\"preview-iframe\" srcdoc=\"Ure\u0111iva\u010d koda\"><\/iframe>\n  <div id=\"editor-container\">\n    <section id=\"html\" class=\"code-section\">\n<textarea style=\"width:100%;height:400px;\" class=\"code-textarea\">\n\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <title>Change Sky Image on Entity Click<\/title>\n    <meta name=\"description\" content=\"A-Frame Example\">\n    <script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"><\/script>\n  <\/head>\n  <body>\n    <a-scene cursor=\"rayOrigin: mouse\">\n      <!-- Skybox -->\n      <a-sky id=\"skybox\" src=\"https:\/\/3dkodiranje.com\/wp-content\/uploads\/2023\/11\/Realism_equirectangular-jpg_stari_most_u_Mostaru_1639036364_9544749-1024x512.jpg\"><\/a-sky>\n\n      <!-- Kamera -->\n      <a-camera position=\"0 1.6 0\">\n        <!-- Raycaster koji omogu\u0107uje kursoru da zra\u010di iz kamere -->\n        <a-entity visible=\"false\" raycaster=\"objects: .clickable\">\n        <\/a-entity>\n      <\/a-camera>\n\n      <!-- Klikabilni element (box) koji mijenja izvor slike na klik -->\n      <a-box class=\"clickable\" position=\"0 1 -5\" color=\"blue\"><\/a-box>\n    <\/a-scene>\n\n    <script>\n      var skybox = document.getElementById(\"skybox\");\n      var clickableEntity = document.querySelector('.clickable');\n      var isImage1 = true;\n\n      \/\/ Dodajte event listener na entitet koji je klikabilan\n      clickableEntity.addEventListener('click', function () {\n        toggleSkyImage();\n      });\n\n      function toggleSkyImage() {\n        \/\/ Promijeni izvor slike na temelju trenutnog stanja\n        if (isImage1) {\n          skybox.setAttribute('src', 'https:\/\/i.imgur.com\/n1UGic5.jpeg');\n        } else {\n          skybox.setAttribute('src', 'https:\/\/3dkodiranje.com\/wp-content\/uploads\/2023\/11\/Realism_equirectangular-jpg_stari_most_u_Mostaru_1639036364_9544749-1024x512.jpg');\n        }\n\n        \/\/ Invertiraj trenutno stanje\n        isImage1 = !isImage1;\n      }\n    <\/script>\n  <\/body>\n<\/html>\n      <\/textarea>\n    <\/section>\n    <section id=\"css\" class=\"code-section\">\n      <textarea style=\"visibility: hidden;\" class=\"code-textarea\" placeholder=\"CSS\"><\/textarea>\n    <\/section>\n    <section id=\"js\" class=\"code-section\">\n      <textarea style=\"visibility: hidden;\" class=\"code-textarea\" placeholder=\"JS\"><\/textarea>\n    <\/section>\n  <\/div>\n  <!-- partial -->\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      var d = document;\n      var q = \"querySelector\";\n      var iframe = d[q](\"#preview-iframe\");\n      var area = document.querySelectorAll('.code-textarea');\n\n      function updateIframeSrcdoc() {\n        iframe.srcdoc = area[0].value + '<style>' +\n          area[1].value + '<\/style>' + '<script>' +\n          area[2].value + '<\\\/script>';\n      }\n\n      \/\/ Initialize iframe srcdoc on page load\n      updateIframeSrcdoc();\n\n      \/\/ Bind on each textarea change event\n      for (var i = area.length - 1; i >= 0; i--) {\n        area[i].addEventListener('input', updateIframeSrcdoc, false);\n      }\n    });\n  <\/script>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/3dkodiranje.com\/index.php\/2023\/12\/06\/kako-postaviti-sliku-na-a-frame-trodimenzionalnu-scenu\/\">Idu\u0107a lekcija<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>U dana\u0161njem digitalnom dobu, tehnolo\u0161ki napredak omogu\u0107ava nam da pro\u0161irimo horizonte na\u010dina na koji do\u017eivljavamo svijet. Jedna od najinovativnijih tehnologija koja se isti\u010de u ovom podru\u010dju su 3D scene. Kroz njih, promocija turizma, kulturnih vrijednosti te drugih aspekata kreiranja sadr\u017eaja postaje vi\u0161e nego samo gledanje slika na ekranu \u2013 postaje interaktivno iskustvo koje osvaja srca [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/237"}],"collection":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":5,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/237\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}