{"id":16,"date":"2023-09-01T08:54:59","date_gmt":"2023-09-01T06:54:59","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=16"},"modified":"2023-12-06T10:15:24","modified_gmt":"2023-12-06T09:15:24","slug":"promjena-boje-i-pozicije-3d-elemenata","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/09\/01\/promjena-boje-i-pozicije-3d-elemenata\/","title":{"rendered":"Promjena boje i pozicije 3D elemenata"},"content":{"rendered":"\n<p>Evo jednostavnog zadatka koji \u0107e vam pomo\u0107i da razumijete kako mijenjati boje i pozicije 3D elemenata:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zadatak: Promjena boje i pozicije 3D elemenata<\/h3>\n\n\n\n<p>Cilj zadatka je stvoriti 3D scenu koja se sastoji od tri razli\u010dita objekta &#8211; kutije (box), sfere (sphere) i valjka (cylinder). Svaki objekt treba imati razli\u010ditu boju i poziciju.<\/p>\n\n\n\n<ol>\n<li><\/li>\n\n\n\n<li>Korak 1: Uklju\u010divanje A-Frame biblioteke<\/li>\n\n\n\n<li>Dodajte sljede\u0107i redak koda na po\u010detak va\u0161e HTML datoteke kako biste uklju\u010dili A-Frame biblioteku:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;!DOCTYPE html&gt; &lt;html lang=\"en\"&gt; &lt;head&gt; &lt;meta charset=\"UTF-8\"&gt; &lt;title&gt;Moj prvi 3D svijet&lt;\/title&gt; &lt;script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body&gt; <\/code><\/code><\/pre>\n\n\n\n<ol>\n<li><\/li>\n\n\n\n<li>Korak 2: Stvaranje 3D scene<\/li>\n\n\n\n<li>Dodajte sljede\u0107i kod ispod otvaranja tijela (<code>&lt;body&gt;<\/code>) kako biste stvorili svoju prvu 3D scenu:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code> &lt;a-scene&gt; &lt;a-box position=\"0 1 -3\" rotation=\"0 45 0\" color=\"red\"&gt;&lt;\/a-box&gt; &lt;a-sphere position=\"2 1 -5\" radius=\"1\" color=\"blue\"&gt;&lt;\/a-sphere&gt; &lt;a-cylinder position=\"-2 1 -5\" radius=\"0.5\" height=\"2\" color=\"green\"&gt;&lt;\/a-cylinder&gt; &lt;\/a-scene&gt; <\/code><\/code><\/pre>\n\n\n\n<ol>\n<li><\/li>\n\n\n\n<li>Ovaj kod \u0107e stvoriti 3 oblika \u2013 kutiju (box), sferu (sphere) i valjak (cylinder) \u2013 i postaviti ih u 3D svemiru. Svaki oblik ima razli\u010dite svojstva kao \u0161to su boja, pozicija i rotacija.<br><\/li>\n\n\n\n<li>Prvo, promijenite boje objekata. Dodajte atribut <code>color<\/code> svakom objektu i promijenite boju na ne\u0161to drugo. Na primjer, mo\u017eete postaviti kutiju (box) na \u017eutu boju, sferu (sphere) na crvenu, a valjak (cylinder) na plavu.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a-box position=\"0 1 -3\" rotation=\"0 45 0\" color=\"yellow\"&gt;&lt;\/a-box&gt;\n&lt;a-sphere position=\"2 1 -5\" radius=\"1\" color=\"red\"&gt;&lt;\/a-sphere&gt;\n&lt;a-cylinder position=\"-2 1 -5\" radius=\"0.5\" height=\"2\" color=\"blue\"&gt;&lt;\/a-cylinder&gt;\n<\/code><\/pre>\n\n\n\n<ol start=\"3\">\n<li>Zatim, promijenite poziciju objekata. Poku\u0161ajte postaviti objekte na razli\u010dite pozicije u 3D prostoru tako da se ne preklapaju. Na primjer, mo\u017eete postaviti kutiju (box) na poziciju <code>(0 1 -3)<\/code>, sferu (sphere) na poziciju <code>(2 1 -5)<\/code> i valjak (cylinder) na poziciju <code>(-2 1 -5)<\/code>.<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>Spremite svoju HTML datoteku i otvorite je u svom web pregledniku. Pogledajte kako se boje i pozicije objekata promijenile u 3D sceni.<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>Poku\u0161ajte sada eksperimentirati s razli\u010ditim bojama i pozicijama kako biste stvorili svoj jedinstveni 3D svijet. Mo\u017eete dodati vi\u0161e objekata ili promijeniti njihove veli\u010dine i rotacije kako biste dodali vi\u0161e kreativnosti u svoju scenu.<\/li>\n\n\n\n<li><\/li>\n<\/ol>\n\n\n\n<p>Ovaj zadatak \u0107e vam pomo\u0107i da prakti\u010dno primijenite svoje znanje o promjeni boja i pozicija 3D elemenata u A-Frame-u. <\/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-box position=\"0 1 -3\" rotation=\"0 45 0\" color=\"yellow\"><\/a-box>\n<a-sphere position=\"2 1 -5\" radius=\"1\" color=\"red\"><\/a-sphere>\n<a-cylinder position=\"-2 1 -5\" radius=\"0.5\" height=\"2\" color=\"blue\"><\/a-cylinder>\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<p>Nakon \u0161to zavr\u0161ite zadatak, mo\u017eete eksperimentirati s raznim kombinacijama boja i pozicija kako bi stvorili svoje jedinstvene 3D svjetove.<\/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\/kako-postaviti-skybox-na-aframe-3d-scenu\/\">Idu\u0107a lekcija<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Evo jednostavnog zadatka koji \u0107e vam pomo\u0107i da razumijete kako mijenjati boje i pozicije 3D elemenata: Zadatak: Promjena boje i pozicije 3D elemenata Cilj zadatka je stvoriti 3D scenu koja se sastoji od tri razli\u010dita objekta &#8211; kutije (box), sfere (sphere) i valjka (cylinder). Svaki objekt treba imati razli\u010ditu boju i poziciju. Ovaj zadatak \u0107e [&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\/16"}],"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=16"}],"version-history":[{"count":8,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":253,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/16\/revisions\/253"}],"wp:attachment":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}