{"id":84,"date":"2023-11-30T13:00:29","date_gmt":"2023-11-30T12:00:29","guid":{"rendered":"https:\/\/3dkodiranje.com\/?p=84"},"modified":"2023-12-06T10:16:49","modified_gmt":"2023-12-06T09:16:49","slug":"84","status":"publish","type":"post","link":"https:\/\/3dkodiranje.com\/index.php\/2023\/11\/30\/84\/","title":{"rendered":"Kako postaviti tekst na A-Frame 3D virtualnu scenu?"},"content":{"rendered":"\n<p>E vo jednostavnog tutoriala za postavljanje teksta na A-Frame scenu za po\u010detnike. <\/p>\n\n\n\n<p>Kao \u0161to je ve\u0107 navedeno, A-Frame je HTML okvir za kreiranje 3D i virtualne stvarnosti sadr\u017eaja. Ovaj primer \u0107e koristiti A-Frame zajedno sa HTML i dodati natpis s tekstom na scenu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Inicijalizacija HTML dokumenta:<\/h3>\n\n\n\n<p>Klikni na kod da ga kopira\u0161.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt; \n\n&lt;html lang=\"en\"&gt; \n\n&lt;head&gt; &lt;meta charset=\"UTF-8\"&gt; \n\n&lt;title&gt;A-Frame Tutorial&lt;\/title&gt; \n\n&lt;!-- Import A-Frame library --&gt; \n\n&lt;script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Dodajte A-Frame scenu:<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- A-Frame Scene --&gt; \n\n&lt;a-scene&gt; \n\n&lt;!-- Postavite kameru --&gt; &lt;a-entity position=\"0 1.6 0\"&gt; &lt;a-camera&gt;&lt;\/a-camera&gt; &lt;\/a-entity&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Dodajte tekstualni entitet:<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Dodajte tekstualni entitet --&gt; \n\n&lt;a-entity position=\"0 1 -4\"&gt; &lt;a-text value=\"Hello, World!\" color=\"black\" align=\"center\"&gt;&lt;\/a-text&gt; &lt;\/a-entity&gt; &lt;\/a-scene&gt; &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. Zatvaranje HTML dokumenta:<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;\/html&gt;<\/code><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">5. Rezultat:<\/h3>\n\n\n\n<p>Ovaj primer kreira A-Frame scenu s tekstom &#8220;Hello, World!&#8221; postavljenim na sredini scene. Tekstualni entitet je dodat s <code>&lt;a-text&gt;<\/code> komponentom, a njegove osobine su postavljene putem atributa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Pokrenite va\u0161 HTML dokument:<\/h3>\n\n\n\n<p>Spremite ovo kao HTML datoteku (npr. <code>index.html<\/code>) i otvorite je u web pregledniku. O\u010dekivali biste videti A-Frame scenu s tekstom na sredini.<\/p>\n\n\n\n<p>Ovaj primer je osnovan i pru\u017ea osnovnu predstavu o tome kako koristiti tekst u A-Frame sceni. Mo\u017eete dalje istra\u017eivati A-Frame dokumentaciju kako biste saznali vi\u0161e o naprednijim funkcijama i mogu\u0107nostima.<\/p>\n\n\n\n<p>Ili mo\u017eete zalijepiti kod u ure\u0111iva\u010d koda kako bi vidjeli rezultat. <\/p>\n\n\n\n<p><\/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<p><\/p>\n\n\n\n<p>Ovo mo\u017ee biti vrlo korisno za dodavanje teksta na 3D scene, a mo\u017eete tako primjerice urediti dio koda dole kako bi dodali natpis &#8220;Stari most u Mostaru&#8221;. <\/p>\n\n\n\n<p>Evo korak-po-korak tutoriala kako urediti tekst u A-Frame sceni kako biste postigli bolji rezultat:<\/p>\n\n\n\n<ol>\n<li><strong>Dodajte tekst u A-Frame sceni:<\/strong><\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;a-text value=\"Stari Most u Mostaru\" position=\"-2.5 1.25 -1.5\" rotation=\"0 15 0\" color=\"black\"&gt;&lt;\/a-text&gt;<\/code><\/code><\/pre>\n\n\n\n<p>Ovaj korak dodaje osnovni tekst bez dodatnih stilskih ili font atributa.<\/p>\n\n\n\n<ol start=\"2\">\n<li><strong>Dodajte <code>font<\/code> atribut za postavljanje fonta:<\/strong><\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;a-text font=\"exo2bold\" <\/code>\n<code>value=\"Stari Most u Mostaru\" <\/code>\n<code>position=\"-2.5 1.25 -1.5\" <\/code>\n<code>rotation=\"0 15 0\" &gt;&lt;\/a-text&gt;<\/code><\/code><\/pre>\n\n\n\n<p>U ovom koraku dodajemo <code>font<\/code> atribut kako bismo postavili odre\u0111eni font (u ovom slu\u010daju, &#8220;exo2bold&#8221;). Pobrinite se da imate pristup ili u\u010ditajte \u017eeljeni font.<\/p>\n\n\n\n<ol start=\"3\">\n<li><strong>Dodajte <code>width<\/code> atribut za postavljanje \u0161irine teksta:<\/strong><\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;a-text <\/code>\n<code>font=\"exo2bold\" <\/code>\n<code>value=\"Stari Most u Mostaru\" <\/code>\n<code>width=\"24\" <\/code>\n<code>position=\"-2.5 1.25 -1.5\" <\/code>\n<code>rotation=\"0 15 0\" &gt;&lt;\/a-text&gt;<\/code><\/code><\/pre>\n\n\n\n<p>Ovaj korak postavlja \u0161irinu teksta na 24 jedinice. Prilagodite ovu vrijednost prema potrebama va\u0161eg dizajna.<\/p>\n\n\n\n<ol start=\"4\">\n<li><strong>Rezultat:<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Kada kombinirate sve ove korake, dobit \u0107ete k\u00f4d koji izgleda ovako:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;a-text <\/code>\n<code>font=\"exo2bold\" <\/code>\n<code>value=\"Stari Most u Mostaru\" <\/code>\n<code>width=\"24\" position=\"-2.5 1.25 -1.5\" <\/code>\n<code>rotation=\"0 15 0\" &gt;&lt;\/a-text&gt;<\/code><\/code><\/pre>\n\n\n\n<p>Sada imate tekst u A-Frame sceni s odre\u0111enim fontom, \u0161irinom i pozicijom. Prilagodite vrijednosti prema va\u0161im preferencijama kako biste postigli \u017eeljeni izgled.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><br><\/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      \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\n<a-text \nfont=\"exo2bold\" \nvalue=\"Stari Most u Mostaru\" \nwidth=\"24\" position=\"-2.5 1.25 -1.5\" \nrotation=\"0 15 0\" ><\/a-text>  \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<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-omoguciti-rotaciju-kamere-u-a-frame-3d-sceni\/\">Idu\u0107a lekcija<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>E vo jednostavnog tutoriala za postavljanje teksta na A-Frame scenu za po\u010detnike. Kao \u0161to je ve\u0107 navedeno, A-Frame je HTML okvir za kreiranje 3D i virtualne stvarnosti sadr\u017eaja. Ovaj primer \u0107e koristiti A-Frame zajedno sa HTML i dodati natpis s tekstom na scenu. 1. Inicijalizacija HTML dokumenta: Klikni na kod da ga kopira\u0161. 2. 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\/84"}],"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=84"}],"version-history":[{"count":21,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":257,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/posts\/84\/revisions\/257"}],"wp:attachment":[{"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3dkodiranje.com\/index.php\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}