{"id":105,"date":"2023-12-02T10:52:03","date_gmt":"2023-12-02T09:52:03","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=105"},"modified":"2023-12-06T10:17:07","modified_gmt":"2023-12-06T09:17:07","slug":"kako-omoguciti-rotaciju-kamere-u-a-frame-3d-sceni","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/12\/02\/kako-omoguciti-rotaciju-kamere-u-a-frame-3d-sceni\/","title":{"rendered":"Kako omogu\u0107iti rotaciju kamere u A-Frame 3D sceni"},"content":{"rendered":"\n
<\/p>\n\n\n\n
Da biste omogu\u0107ili rotaciju kamere u A-Frame sceni, mo\u017eete koristiti komponentu look-controls<\/code>. Ova komponenta pru\u017ea osnovne kontrolne funkcije, uklju\u010duju\u0107i rotaciju kamere.<\/p>\n\n\n\n
Evo kako mo\u017eete a\u017eurirati va\u0161u A-Frame scenu kako biste omogu\u0107ili rotaciju kamere:<\/p>\n\n\n\n
\nDodajte look-controls<\/code> komponentu kamere:<\/li>\n<\/ol>\n\n\n\n<a-entity position=\"0 1 -4\" camera look-controls> <a-text value=\"Stari most u Mostaru\" color=\"yellow\" align=\"center\"><\/a-text> <\/a-entity><\/code><\/code><\/pre>\n\n\n\n\nAko \u017eelite automatsku rotaciju kamere oko svoje osi, mo\u017eete dodati komponentu rotation<\/code> na kamere s animacijom. Evo kako to mo\u017eete u\u010diniti:<\/li>\n<\/ol>\n\n\n\n<\/p>\n\n\n\n
<a-entity position=\"0 1 -4\" camera look-controls rotation=\"0 0 0\" animation=\"property: rotation; to: 0 360 0; loop: true; dur: 10000\"> <a-text value=\"Stari most u Mostaru\" color=\"yellow\" align=\"center\"><\/a-text> <\/a-entity><\/code><\/code><\/pre>\n\n\n\nU ovom primjeru, animation<\/code> komponenta dodaje animaciju rotacije kamere. Parametar property: rotation<\/code> ozna\u010dava da se animira svojstvo rotacije kamere, to: 0 360 0<\/code> postavlja krajnju rotaciju (u ovom slu\u010daju, pun krug oko Y osi), loop: true<\/code> omogu\u0107uje beskona\u010dno ponavljanje animacije, a dur: 10000<\/code> postavlja trajanje animacije na 10 sekundi.<\/p>\n\n\n\n
Prilagodite vrijednosti prema svojim potrebama. Ovaj primjer \u0107e uzrokovati automatsku rotaciju kamere oko Y osi svakih 10 sekundi.<\/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> <html lang=\"en\">\n <head> <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> <\/head> <body>\n\n<a-scene> \n<a-entity position=\"0 1 -4\" camera look-controls rotation=\"0 0 0\" animation=\"property: rotation; to: 0 360 0; loop: true; dur: 10000\">\n\n<\/a-entity>\n      <a-text value=\"Stari most u Mostaru\" color=\"yellow\" align=\"center\"><\/a-text>\n    <\/a-entity>\n\n<a-sky src=\"https:\/\/3dkodiranje.com\/wp-content\/uploads\/2023\/11\/Realism_equirectangular-jpg_stari_most_u_Mostaru_1639036364_9544749-1024x512.jpg\"><\/a-sky>\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<p>Da biste omogu\u0107ili korisniku da kasnije sam pregledava 3D scenu nakon zavr\u0161etka automatske rotacije, mo\u017eete prilagoditi kod za kontrolu rotacije kamere. <\/p>\n\n\n\n<p>Evo korak po korak uputa kako prilagoditi kameru<\/p>\n\n\n\n<ol>\n<li><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;a-entity id=\"cameraEntity\" position=\"0 3 20\" rotation=\"0 90 0\" camera look-controls wasd-controls animation__rotation=\"property: rotation; to: 0 0 0; dur: 3000\"&gt;&lt;\/a-entity&gt;\n<\/code><\/pre>\n\n\n\n<p>Ovaj kod koristi <code>animation__rotation<\/code> kako bi postavio po\u010detnu rotaciju kamere na <code>0 90 0<\/code> (gledanje prema istoku) i zatim postavio animaciju rotacije kamere na <code>0 0 0<\/code> (gledanje prema sjeveru) s trajanjem od 3 sekunde.<\/p>\n\n\n\n<p>Sada, korisnik mo\u017ee koristiti kontrole WASD za pomicanje kamere i mi\u0161 za promjenu smjera gledanja. Animacija rotacije kamere automatski \u0107e se pokrenuti kad se stranica u\u010dita.<\/p>\n\n\n\n<p>Koraci:<\/p>\n\n\n\n<ol>\n<li><strong><code>a-entity<\/code> Element s Kamerom:<\/strong> Element <code>a-entity<\/code> sadr\u017ei kameru (<code>camera<\/code>). <code>position<\/code> postavlja po\u010detnu poziciju kamere, a <code>rotation<\/code> postavlja po\u010detnu rotaciju kamere.<\/li>\n\n\n\n<li><strong><code>look-controls<\/code> i <code>wasd-controls<\/code>:<\/strong> <code>look-controls<\/code> omogu\u0107uje korisnicima upravljanje smjerom gledanja putem mi\u0161a, a <code>wasd-controls<\/code> omogu\u0107uje pomicanje kamere koriste\u0107i tipke W, A, S, D.<\/li>\n\n\n\n<li><strong><code>animation__rotation<\/code>:<\/strong> Ovaj atribut postavlja animaciju rotacije kamere. <code>property: rotation<\/code> ozna\u010dava da se animira svojstvo rotacije kamere, <code>to: 0 0 0<\/code> postavlja krajnju rotaciju (gledanje prema sjeveru), <code>dur: 3000<\/code> postavlja trajanje animacije na 3 sekunde.<\/li>\n<\/ol>\n\n\n\n<p>S ovim kodom, kamere \u0107e se automatski rotirati prema sjeveru tijekom prvih 3 sekunde, a zatim \u0107e korisnik mo\u0107i koristiti mi\u0161a i tipke za pomicanje i daljnje upravljanje kamerom.<\/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\/12\/02\/kako-kreirati-3d-portal-za-prijelaz-s-3d-scene-na-drugu-web-stanicu\/\">Idu\u0107a lekcija<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Da biste omogu\u0107ili rotaciju kamere u A-Frame sceni, mo\u017eete koristiti komponentu look-controls. Ova komponenta pru\u017ea osnovne kontrolne funkcije, uklju\u010duju\u0107i rotaciju kamere. Evo kako mo\u017eete a\u017eurirati va\u0161u A-Frame scenu kako biste omogu\u0107ili rotaciju kamere: U ovom primjeru, animation komponenta dodaje animaciju rotacije kamere. Parametar property: rotation ozna\u010dava da se animira svojstvo rotacije kamere, to: 0 360 [&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\/105"}],"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=105"}],"version-history":[{"count":12,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/105\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/105\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/categories?post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}