{"id":14,"date":"2023-09-01T08:51:50","date_gmt":"2023-09-01T06:51:50","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=14"},"modified":"2023-12-06T10:59:11","modified_gmt":"2023-12-06T09:59:11","slug":"programiranje-svoje-prve-3d-virtualne-scene","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/09\/01\/programiranje-svoje-prve-3d-virtualne-scene\/","title":{"rendered":"Programiranje svoje prve 3D virtualne scene"},"content":{"rendered":"\n<p>Evo jednostavnog tutoriala koji \u0107e vam pomo\u0107i da zapo\u010dnete s osnovama rada u radnom okviru A-Frame za 3D programiranje. <\/p>\n\n\n\n<p>A-Frame je odli\u010dan alat za stvaranje virtualne stvarnosti (VR) i 3D svjetova koriste\u0107i HTML i JavaScript. Sljede\u0107i koraci \u0107e vam pomo\u0107i da po\u010dnete:<\/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 programiranjem u A-Frame, morate stvoriti HTML datoteku koja \u0107e sadr\u017eavati va\u0161u 3D scenu. Otvorite svoj omiljeni ure\u0111iva\u010d teksta (kao \u0161to je Notepad) i stvorite novu datoteku s ekstenzijom <code>.html<\/code>. Ukoliko \u017eelite u\u010diti na mobitelu, mo\u017eete koristiti ure\u0111iva\u010d koda koji je kreiran na ovoj stranici. Uklju\u010dite ure\u0111iva\u010d i zalijepite kod u HTML dio ure\u0111iva\u010da. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Korak 2: Uklju\u010divanje A-Frame biblioteke<\/h3>\n\n\n\n<p>Dodajte sljede\u0107i redak koda na po\u010detak va\u0161e HTML datoteke kako biste uklju\u010dili A-Frame biblioteku:<\/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<h3 class=\"wp-block-heading\">Korak 3: Stvaranje 3D scene<\/h3>\n\n\n\n<p>Dodajte sljede\u0107i kod ispod otvaranja tijela (<code>&lt;body&gt;<\/code>) kako biste stvorili svoju prvu 3D scenu:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;a-scene&gt;\n        &lt;a-box position=\"0 1 -3\" rotation=\"0 45 0\" color=\"red\"&gt;&lt;\/a-box&gt;\n        &lt;a-sphere position=\"2 1 -5\" radius=\"1\" color=\"blue\"&gt;&lt;\/a-sphere&gt;\n        &lt;a-cylinder position=\"-2 1 -5\" radius=\"0.5\" height=\"2\" color=\"green\"&gt;&lt;\/a-cylinder&gt;\n    &lt;\/a-scene&gt;\n<\/code><\/pre>\n\n\n\n<p>Ovaj kod \u0107e stvoriti 3 oblika &#8211; kutiju (box), sferu (sphere) i valjak (cylinder) &#8211; i postaviti ih u 3D svemiru. Svaki oblik ima razli\u010dite svojstva kao \u0161to su boja, pozicija i rotacija.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Korak 4: Pregled u web pregledniku<\/h3>\n\n\n\n<p>Spremite svoju HTML datoteku i otvorite je u svom web pregledniku. Trebali biste vidjeti svoju prvu 3D scenu s kutijom, sferom i valjkom!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Korak 5: Igranje s parametrima<\/h3>\n\n\n\n<p>Sada mo\u017eete eksperimentirati s razli\u010ditim parametrima kako biste promijenili izgled i pona\u0161anje va\u0161ih 3D objekata. Poku\u0161ajte promijeniti boje, pozicije i rotacije, ili dodati nove objekte.<\/p>\n\n\n\n<p>Ovo je samo po\u010detak! A-Frame ima mnogo vi\u0161e mogu\u0107nosti i komponenti koje mo\u017eete istra\u017eiti kako biste stvarali slo\u017eenije 3D svjetove. Posjetite slu\u017ebenu A-Frame dokumentaciju (<a href=\"https:\/\/aframe.io\/docs\/1.2.0\/introduction\/\">https:\/\/aframe.io\/docs\/1.2.0\/introduction\/<\/a>) kako biste saznali vi\u0161e i prona\u0161li primjere i resurse za u\u010denje.<\/p>\n\n\n\n<p>Ovo je osnovni tutorial koji \u0107e vas uputiti u rad s radnim okvirom A-Frame za 3D programiranje. <\/p>\n\n\n\n<p>S vremenom, mo\u017eete dodavati vi\u0161e slo\u017eenih elemenata i razvijati svoje vje\u0161tine programiranja i dizajna 3D svjetova. <\/p>\n\n\n\n<p>Sretno!<\/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<!-- 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-box position=\"0 1 -3\" rotation=\"0 45 0\" color=\"red\"><\/a-box>\n        <a-sphere position=\"2 1 -5\" radius=\"1\" color=\"blue\"><\/a-sphere>\n        <a-cylinder position=\"-2 1 -5\" radius=\"0.5\" height=\"2\" color=\"green\"><\/a-cylinder>\n    <\/a-scene>\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<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\/promjena-boje-i-pozicije-3d-elemenata\/\">Idu\u0107a lekcija<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Evo jednostavnog tutoriala koji \u0107e vam pomo\u0107i da zapo\u010dnete s osnovama rada u radnom okviru A-Frame za 3D programiranje. A-Frame je odli\u010dan alat za stvaranje virtualne stvarnosti (VR) i 3D svjetova koriste\u0107i HTML i JavaScript. Sljede\u0107i koraci \u0107e vam pomo\u0107i da po\u010dnete: Korak 1: Priprema radnog okvira Prije nego \u0161to zapo\u010dnete s programiranjem u A-Frame, [&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\/14"}],"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=14"}],"version-history":[{"count":12,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":303,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/14\/revisions\/303"}],"wp:attachment":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}