{"id":244,"date":"2023-12-06T09:57:46","date_gmt":"2023-12-06T08:57:46","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=244"},"modified":"2023-12-06T10:12:09","modified_gmt":"2023-12-06T09:12:09","slug":"kako-postaviti-sliku-na-a-frame-trodimenzionalnu-scenu","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/12\/06\/kako-postaviti-sliku-na-a-frame-trodimenzionalnu-scenu\/","title":{"rendered":"Kako postaviti sliku na A-Frame trodimenzionalnu scenu"},"content":{"rendered":"\n

Da bismo postavili sliku na A-Frame scenu, koristiti \u0107emo HTML zajedno s A-Frame bibliotekom. <\/p>\n\n\n\n

Evo jednostavnog korak-po-korak tutoriala:<\/p>\n\n\n\n

Uklju\u010dite A-Frame biblioteku:<\/strong> Dodajte sljede\u0107i red u <head><\/code> sekciju va\u0161eg HTML dokumenta kako biste uklju\u010dili A-Frame biblioteku.<\/p>\n\n\n\n

<script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"><\/script><\/code><\/code><\/pre>\n\n\n\nDefinirajte A-Frame scenu:<\/strong> Dodajte <a-scene><\/code> element kako biste definirali A-Frame scenu.  Ovaj element obuhvata sve A-Frame entitete.<\/p>\n\n\n\n
<a-scene> <!-- Va\u0161i A-Frame entiteti \u0107e i\u0107i ovdje --> <\/a-scene><\/code><\/code><\/pre>\n\n\n\nDodajte sliku:<\/strong> Dodajte <a-image><\/code> element unutar <a-scene><\/code> elementa kako biste postavili sliku.  Koristite src<\/code> atribut za definiranje putanje do slike.<\/p>\n\n\n\n
<a-scene> <a-image src=\"putanja\/do\/vasa_slika.jpg\"><\/a-image> <\/a-scene><\/code><\/code><\/pre>\n\n\n\nPrilagodite polo\u017eaj slike:<\/strong> Mo\u017eete prilagoditi polo\u017eaj slike koriste\u0107i position<\/code> atribut.  Na primjer:<\/p>\n\n\n\n
<a-scene> <a-image src=\"putanja\/do\/vasa_slika.jpg\" position=\"0 2 -5\"><\/a-image> <\/a-scene> <\/code>\n\n<\/code><\/pre>\n\n\n\nU ovom primjeru, slika \u0107e biti postavljena na visinu 2, unazad (u smjeru negativne Z osi) i na sredinu (jer su X i Y postavljeni na 0). <\/p>\n\n\n\n
Pokrenite svoju HTML stranicu:<\/strong> Spremite svoj HTML dokument s ovim kodom i otvorite ga u web pregledniku. <\/p>\n\n\n\n
Ukratko, ovo je osnovni HTML kod za postavljanje slike na A-Frame scenu. Naravno, mo\u017eete dalje prilagoditi i dodavati druge A-Frame entitete i postavke prema potrebi.<\/p>\n\n\n\n\n  <\/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<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\n<a-scene> \n<a-image src=\"https:\/\/3dkodiranje.com\/wp-content\/uploads\/2023\/12\/aframe-1024x567.png\" position=\"0 2 -5\"><\/a-image>\n<\/a-image> <\/a-scene>\n\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","protected":false},"excerpt":{"rendered":"<p>Da bismo postavili sliku na A-Frame scenu, koristiti \u0107emo HTML zajedno s A-Frame bibliotekom. Evo jednostavnog korak-po-korak tutoriala: Uklju\u010dite A-Frame biblioteku: Dodajte sljede\u0107i red u &lt;head> sekciju va\u0161eg HTML dokumenta kako biste uklju\u010dili A-Frame biblioteku. Definirajte A-Frame scenu: Dodajte &lt;a-scene> element kako biste definirali A-Frame scenu. Ovaj element obuhvata sve A-Frame entitete. Dodajte sliku: Dodajte [&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\/244"}],"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=244"}],"version-history":[{"count":5,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/244\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/244\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/media?parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/categories?post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/tags?post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}