{"id":20,"date":"2023-09-01T09:06:22","date_gmt":"2023-09-01T07:06:22","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=20"},"modified":"2023-12-06T10:16:03","modified_gmt":"2023-12-06T09:16:03","slug":"postavljanje-animacije-na-3d-sceni","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/09\/01\/postavljanje-animacije-na-3d-sceni\/","title":{"rendered":"Postavljanje animacije na 3D sceni"},"content":{"rendered":"\n

Evo jednostavnog tutorijala za djecu \u0107e objasniti kako stvoriti jednostavnu animaciju u A-Frameu, zajedno s osnovama programiranja.<\/p>\n\n\n\n

Korak 1: Priprema radnog okvira<\/h3>\n\n\n\n
Prije nego \u0161to zapo\u010dnemo s programiranjem animacije, morate stvoriti HTML datoteku i uklju\u010diti A-Frame biblioteku. Otvorite svoj omiljeni ure\u0111iva\u010d teksta (kao \u0161to je Notepad) i stvorite novu datoteku s ekstenzijom `.html<\/code>.<\/p>\n\n\n\n`

Korak 2: Dodavanje osnovnih elemenata<\/h3>\n\n\n\nUnutar svoje HTML datoteke, dodajte osnovne elemente za A-Frame scenu:<\/p>\n\n\n\n
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Jednostavna Animacija<\/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\" color=\"blue\"><\/a-box>\n    <\/a-scene>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nU ovom primjeru, koristit \u0107emo jednostavan element <a-box><\/code> koji \u0107e biti animiran.<\/p>\n\n\n\n
Korak 3: Dodavanje animacije<\/h3>\n\n\n\nDa biste dodali animaciju, koristit \u0107emo komponentu animation<\/code>. Dodajte sljede\u0107i kod ispod <a-box><\/code> elementa:<\/p>\n\n\n\n
<\/p>\n\n\n\n
<a-box position=\"0 1 -3\" color=\"blue\" animation=\"property: rotation; to: 0 360 0; loop: true; dur: 5000\"><\/a-box>\n<\/code><\/pre>\n\n\n\nObja\u0161njenje:<\/p>\n\n\n\n
\nanimation<\/code>: Ovo je komponenta za animaciju koja se dodaje elementu <a-box><\/code>.<\/li>\n\n\n\n
property: rotation<\/code>: Odre\u0111uje se svojstvo koje \u017eelimo animirati. U ovom slu\u010daju, rotacija \u0107e se mijenjati.<\/li>\n\n\n\n
to: 0 360 0<\/code>: Definira se ciljna vrijednost svojstva. Ovdje smo postavili rotaciju na 360 stupnjeva oko osi Y.<\/li>\n\n\n\n
loop: true<\/code>: Postavlja animaciju da se neprestano ponavlja.<\/li>\n\n\n\n
dur: 5000<\/code>: Ozna\u010dava trajanje animacije u milisekundama (ovdje 5000 ms, odnosno 5 sekundi).<\/li>\n<\/ul>\n\n\n\nKorak 4: Pregledajte animaciju<\/h3>\n\n\n\nSpremite svoju HTML datoteku i otvorite je u web pregledniku. Trebali biste vidjeti animaciju gdje se kutija neprestano okre\u0107e oko svoje osi.<\/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<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Jednostavna Animacija<\/title>\n    <script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"><\/script>\n<\/head>\n<body>\n    <a-scene>\n\n<a-box position=\"0 1 -3\" color=\"blue\" animation=\"property: rotation; to: 0 360 0; loop: true; dur: 5000\"><\/a-box>\n\n    <\/a-scene>\n<\/body>\n<\/html> \n<a-box position=\"0 1 -3\" color=\"blue\" animation=\"property: rotation; to: 0 360 0; loop: true; dur: 5000\"><\/a-box>\n\n<\/a-scene>\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 5: Eksperimentirajte i prilagodite<\/h3>\n\n\n\n<p>Sada mo\u017eete eksperimentirati s razli\u010ditim vrijednostima svojstava kako biste promijenili izgled i pona\u0161anje animacije. Na primjer, mo\u017eete promijeniti boje, pozicije i trajanje animacije.<\/p>\n\n\n\n<p>Ovaj tutorial omogu\u0107uje da stvorite jednostavnu animaciju u A-Frameu, koriste\u0107i osnovne koncepte programiranja kao \u0161to su svojstva, ciljne vrijednosti i trajanje. <\/p>\n\n\n\n<p>Animacije su zabavan na\u010din za u\u010denje osnova programiranja i stvaranja interaktivnih 3D svjetova.<\/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\/11\/30\/kreiranje-vlastitih-virtualnih-svjetova\/\">Idu\u0107a lekcija<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Evo jednostavnog tutorijala za djecu \u0107e objasniti kako stvoriti jednostavnu animaciju u A-Frameu, zajedno s osnovama programiranja. Korak 1: Priprema radnog okvira Prije nego \u0161to zapo\u010dnemo s programiranjem animacije, morate stvoriti HTML datoteku i uklju\u010diti A-Frame biblioteku. Otvorite svoj omiljeni ure\u0111iva\u010d teksta (kao \u0161to je Notepad) i stvorite novu datoteku s ekstenzijom .html. Korak 2: [&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\/20"}],"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=20"}],"version-history":[{"count":5,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/20\/revisions\/255"}],"wp:attachment":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}