{"id":18,"date":"2023-09-01T09:02:47","date_gmt":"2023-09-01T07:02:47","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=18"},"modified":"2023-12-06T10:15:44","modified_gmt":"2023-12-06T09:15:44","slug":"kako-postaviti-skybox-na-aframe-3d-scenu","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/09\/01\/kako-postaviti-skybox-na-aframe-3d-scenu\/","title":{"rendered":"Kako postaviti Skybox na Aframe 3D scenu?"},"content":{"rendered":"\n<p>Postavljanje skyboxova mo\u017ee zna\u010dajno pobolj\u0161ati izgled va\u0161e 3D scene u A-Frame-u. Evo kako mo\u017eete napraviti skybox za svoju scenu i gdje mo\u017eete prona\u0107i besplatne skybox teksture:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Korak 1: Priprema radnog okvira<\/h3>\n\n\n\n<p>Prije nego \u0161to zapo\u010dnete s dodavanjem skyboxa svojoj A-Frame sceni, osigurajte da ste stvorili HTML datoteku i uklju\u010dili A-Frame biblioteku, kako je opisano u prethodnom tutorialu (Klikni <strong><a href=\"https:\/\/3dkodiranje.com\/index.php\/2023\/09\/01\/programiranje-svoje-prve-3d-virtualne-scene\/\">OVDJE<\/a><\/strong>) ili kopiraj kod ispod:<\/p>\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;Moj prvi 3D svijet&lt;\/title&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<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Korak 2: Dodajte skybox<\/h3>\n\n\n\n<p>Da biste dodali skybox svojoj sceni, koristit \u0107emo komponentu <code>a-sky<\/code>. Evo kako izgleda kod za dodavanje skyboxa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a-scene&gt;\n    &lt;a-sky src=\"putanja\/do\/vase\/skybox\/slike.jpg\"&gt;&lt;\/a-sky&gt;\n    &lt;!-- Ostatak va\u0161e 3D scene --&gt;\n&lt;\/a-scene&gt;\n<\/code><\/pre>\n\n\n\n<p>U ovom primjeru, zamijenite <code>\"putanja\/do\/vase\/skybox\/slike.jpg\"<\/code> sa stvarnom putanjom do va\u0161e skybox slike. Skybox slika mora biti posebna slika koja se koristi za stvaranje pozadine va\u0161e scene.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Korak 3: Prona\u0111ite besplatne skybox teksture<\/h3>\n\n\n\n<p>Sada trebate prona\u0107i besplatne skybox teksture koje mo\u017eete koristiti za svoju A-Frame scenu. Evo nekoliko web stranica gdje mo\u017eete prona\u0107i besplatne skybox teksture:<\/p>\n\n\n\n<ol>\n<li><strong>HDRI Haven (<a href=\"https:\/\/hdrihaven.com\/\">https:\/\/hdrihaven.com\/<\/a>):<\/strong> Ova stranica nudi besplatne HDR (High Dynamic Range) teksture koje se mogu koristiti za skyboxove. Preuzmite \u017eeljenu teksturu i koristite je u svojoj A-Frame sceni.<\/li>\n\n\n\n<li><strong>CC0 Textures (<a href=\"https:\/\/cc0textures.com\/\">https:\/\/cc0textures.com\/<\/a>):<\/strong> Ovdje mo\u017eete prona\u0107i besplatne teksture visoke kvalitete koje su ozna\u010dene kao Creative Commons CC0, \u0161to zna\u010di da ih mo\u017eete koristiti u svojim projektima bez ikakvih ograni\u010denja.<\/li>\n\n\n\n<li><strong>Poly Haven (<a href=\"https:\/\/polyhaven.com\/\">https:\/\/polyhaven.com\/<\/a>):<\/strong> Ova stranica nudi besplatne teksture i HDRI-e koji su pogodni za stvaranje skyboxova. Pretra\u017eite njihovu kolekciju i preuzmite odgovaraju\u0107e teksture.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Korak 4: Dodajte skybox u svoju A-Frame scenu<\/h3>\n\n\n\n<p>Nakon \u0161to preuzmete odgovaraju\u0107u skybox teksturu, postavite je na svoj web server ili lokalni direktorij i a\u017eurirajte putanju u va\u0161em A-Frame kodu, kao \u0161to je prikazano u koraku 2.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Korak 5: Pregledajte svoju scenu<\/h3>\n\n\n\n<p>Spremite svoju HTML datoteku i otvorite je u svom web pregledniku. Trebali biste vidjeti svoj novi skybox koji dodaje atmosferu va\u0161oj 3D sceni.<\/p>\n\n\n\n<p>U primjeru ispod mo\u017eete vidjeti kako izgleda kada se kao skybox koristi slika sa servisa Imgur.<\/p>\n\n\n\n<p>Na ovoj poveznici mo\u017eete na\u0107i mno\u0161tvo 3D pozadina koje mo\u017eete koristiti kao pozadine za vlastite 3D scene (Klikni <a href=\"https:\/\/imgur.com\/search?q=Equirectangular%20\" target=\"_blank\" rel=\"noopener\" title=\"\">POVEZNICU<\/a>).<\/p>\n\n\n\n<p><\/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>Moj prvi 3D svijet<\/title>\n    <script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"><\/script>\n<\/head>\n<body>\n<a-scene>\n<a-sky src=\"https:\/\/i.imgur.com\/n1UGic5.jpeg\"><\/a-sky>\n    <\/a-scene>\n>\n\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<h3 class=\"wp-block-heading\">Korak 6: Eksperimentirajte i prilagodite<\/h3>\n\n\n\n<p>Mo\u017eete eksperimentirati s razli\u010ditim skybox teksturama kako biste promijenili izgled svoje scene. Tako\u0111er, mo\u017eete dodavati razli\u010dite komponente i objekte kako biste stvorili jedinstvenu 3D scenu.<\/p>\n\n\n\n<p>To je osnovni tutorial za dodavanje skyboxa svojoj A-Frame sceni. Pronala\u017eenje i zamjena skybox tekstura je zabavan na\u010din da pobolj\u0161ate izgled va\u0161ih VR i 3D projekata. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Napomena<\/strong><\/h2>\n\n\n\n<p>Skybox na localhostu mo\u017eda ne radi zbog problema s politikama sigurnosti preglednika. Preglednici \u010desto primjenjuju sigurnosne politike koje ograni\u010davaju pristup resursima kao \u0161to su slike i teksture kada se web stranica pokre\u0107e lokalno s <code>localhost<\/code> adrese. To mo\u017ee uzrokovati da skybox ili druge slike ne budu u\u010ditane kako treba.<\/p>\n\n\n\n<p>Da biste rije\u0161ili taj problem, mo\u017eete probati sljede\u0107e opcije:<\/p>\n\n\n\n<ol start=\"2\">\n<li><strong>Koristite servis za privremeno dijeljenje slika:<\/strong> Da biste brzo podijelili sliku s drugima i testirali je na localhostu, mo\u017eete koristiti online servise poput Imgur. Evo kako mo\u017eete postaviti skybox s Imgurom:\n<ul>\n<li>Idite na <a href=\"https:\/\/imgur.com\/\">https:\/\/imgur.com\/<\/a> i kliknite na \"New Post\" u gornjem desnom kutu.<\/li>\n\n\n\n<li>U\u010ditajte svoju skybox sliku na Imgur.<\/li>\n\n\n\n<li>Nakon \u0161to je slika u\u010ditana, kliknite na nju kako biste je otvorili.<\/li>\n\n\n\n<li>Kopirajte URL slike iz preglednika.<\/li>\n\n\n\n<li>U svojoj A-Frame sceni, koristite taj URL za postavljanje skybox slike:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<p><code>&lt;a-sky src=\"URL_IZ_IMGUR-a\"&gt;&lt;\/a-sky&gt;<\/code><\/p>\n\n\n\n<p>Ovo \u0107e omogu\u0107iti da se slika u\u010dita s Imgur-a bez problema s politikama sigurnosti preglednika.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/3dkodiranje.com\/Uredjivac\/\" width=\"100%\" height=\"300\" style=\"border:1px solid black;\">\n<\/iframe>\n\n\n\n<p>Skybox i druge vanjske resurse kao \u0161to su slike i teksture mogu nai\u0107i na probleme s politikama prekora\u010denja zahtjeva sa strane preglednika (CORS - Cross-Origin Resource Sharing) kada se poku\u0161avaju u\u010ditati s drugih domena ili adresa. To se \u010desto doga\u0111a kada poku\u0161avate u\u010ditati resurse s HTTP adresa na HTTPS web stranici.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Problem s u\u010ditavanjem Skybox-a zbog CORS-a<\/h2>\n\n\n\n<p>Preglednici imaju politiku sigurnosti koja ograni\u010dava pristup resursima s razli\u010ditih domena kako bi se sprije\u010dio potencijalni sigurnosni rizik. Na primjer, ako va\u0161a web stranica koristi HTTPS, a poku\u0161avate u\u010ditati resurse s HTTP adresa, preglednik \u0107e blokirati te resurse kako bi sprije\u010dio potencijalne sigurnosne prijetnje.<\/p>\n\n\n\n<p>Da biste rije\u0161ili problem s CORS-om i omogu\u0107ili u\u010ditavanje resursa s HTTP adresa na HTTPS web stranici, mo\u017eete razmotriti sljede\u0107e opcije:<\/p>\n\n\n\n<ol>\n<li><strong>Koristite HTTPS:<\/strong> Najbolji na\u010din za rje\u0161avanje problema s CORS-om je prebacivanje na HTTPS ako ve\u0107 niste. HTTPS je sigurniji protokol i omogu\u0107ava slobodno u\u010ditavanje resursa s drugih HTTPS adresa.<\/li>\n\n\n\n<li><strong>Uzmite resurse s istog domena:<\/strong> Ako je mogu\u0107e, poku\u0161ajte hostirati resurse (uklju\u010duju\u0107i skybox slike) na istom domenu na kojem se nalazi va\u0161a A-Frame web stranica. To \u0107e izbje\u0107i probleme s CORS-om.<\/li>\n\n\n\n<li><strong>Postavite CORS politike na serveru:<\/strong> Ako kontrolirate web server s kojeg dolaze va\u0161i resursi (npr. skybox slike), mo\u017eete konfigurirati CORS politike na serveru kako biste omogu\u0107ili odre\u0111enim domenama pristup tim resursima. Ovo mo\u017ee biti slo\u017eeno i zahtijeva konfiguraciju na strani servera.<\/li>\n\n\n\n<li><strong>Koristite proxy server:<\/strong> Mo\u017eete postaviti proxy server koji \u0107e poslu\u017eivati resurse s HTTP adresa na va\u0161oj HTTPS web stranici. Ovaj proxy server \u0107e poslu\u017eivati resurse s istog domena kao va\u0161a web stranica, \u0161to \u0107e izbje\u0107i probleme s CORS-om.<\/li>\n<\/ol>\n\n\n\n<p>Izbor opcije ovisi o va\u0161im specifi\u010dnim potrebama i mogu\u0107nostima. Naj\u010de\u0161\u0107i pristup je prelazak na HTTPS, \u0161to je i preporu\u010dena praksa zbog bolje sigurnosti na webu.<\/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\/09\/01\/postavljanje-animacije-na-3d-sceni\/\">Idu\u0107a lekcija<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Postavljanje skyboxova mo\u017ee zna\u010dajno pobolj\u0161ati izgled va\u0161e 3D scene u A-Frame-u. Evo kako mo\u017eete napraviti skybox za svoju scenu i gdje mo\u017eete prona\u0107i besplatne skybox teksture: Korak 1: Priprema radnog okvira Prije nego \u0161to zapo\u010dnete s dodavanjem skyboxa svojoj A-Frame sceni, osigurajte da ste stvorili HTML datoteku i uklju\u010dili A-Frame biblioteku, kako je opisano u [&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\/18"}],"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=18"}],"version-history":[{"count":9,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":254,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/18\/revisions\/254"}],"wp:attachment":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}