Title: Naloga napredno: Samo za IT kader - Uporaba spletnih knjižnic za izdelavo web AR izkušnje
Course: VR in AR v izobraževanju: Pogon inovacij in trajnostnega razvoja / P1 > Section: Načrt za uporabo VR/AR med učno uro

V okviru naprednih nalog, namenjenih izključno IT kaderju, predstavlja uporaba spletnih knjižnic za izdelavo web AR (obogatene resničnosti) izkušenj izjemno pomembno veščino, ki jo je mogoče učinkovito razvijati tudi od doma. Sodobne knjižnice, kot so A-Frame, three.js in AR.js, omogočajo razvijalcem ustvarjanje interaktivnih in vizualno impresivnih AR aplikacij neposredno v spletnih brskalnikih, brez potrebe po namestitvi dodatne programske opreme.

Navodila za izdelavo AR lekcije

Da bi ustvarili AR lekcijo s knjižnico MindAR.js, bomo sledili tem korakom za razvoj osnovnega primera, kjer bo skeniranje slike v učbeniku sprožilo prikaz 3D modela. Zagotovil bom HTML primer, ki ga lahko uporabite skupaj z vzorčno sliko.

Koraki za ustvarjanje AR lekcije

1. Priprava HTML strukture.
2. Vključitev potrebnih knjižnic.
3. Dodajanje AR skripte za obdelavo ciljne slike in 3D modela.

Primer HTML kode

Spodaj je popoln primer z ustrezno HTML in JavaScript kodo za dosego AR funkcionalnosti:



<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Primer AR lekcije</title>
    <script src="https://cdn.jsdelivr.net/npm/aframe@1.2.0/dist/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@0.5.0/dist/aframe/dist/aframe-mindar.js"></script>
    <style>
        body, html {
            margin: 0;
            overflow: hidden;
            height: 100%;
        }
    </style>
</head>
<body>
    <a-scene mindar="imageTargetSrc: target.mind; autoStart: true;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
        <a-assets>
            <a-asset-item id="model" src="model.gltf"></a-asset-item>
        </a-assets>

        <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

        <a-entity mindar-image-target="targetIndex: 0">
            <a-gltf-model src="#model" position="0 0 0" scale="0.5 0.5 0.5"></a-gltf-model>
        </a-entity>
    </a-scene>
</body>
</html>


Pojasnilo

1. Vključitev knjižnic:
  - Vključimo A-Frame knjižnico za 3D prikaz.
  - Vključimo MindAR.js knjižnico za obdelavo AR funkcionalnosti.
2. Priprava prizora:
  - Ustvarimo prizor (a-scene) s konfiguracijo MindAR, ki določa, katero ciljno sliko bomo uporabljali.
  - Dodamo kamero za prikaz AR prizora.
  - Naložimo 3D model, ki bo prikazan ob skeniranju ciljne slike.
3. Nastavitev ciljne slike in 3D modela:
  - Definiramo ciljno sliko z atributom mindar-image-target, ki določa indeks ciljne slike.
  - Dodamo 3D model, ki bo prikazan na mestu ciljne slike.

Potrebne datoteke

1. Ciljna slika:
  - Ciljno sliko (npr. target.jpg) morate pretvoriti v datoteko target.mind s pomočjo orodja MindAR Image Compiler.
  - https://hiukim.github.io/mind-ar-js-doc/tools/compile
2. 3D model:
  - 3D model v formatu GLTF (npr. model.gltf).

Kako zagnati

1. Shranite zgornjo HTML kodo v datoteko npr. index.html.
2. Pripravite ciljno sliko in jo pretvorite v target.mind.
3. Pripravite 3D model v GLTF formatu.
4. Odprite index.html v brskalniku, ki podpira WebXR (npr. Chrome).

Vzorčna slika

Dodajte vzorčno sliko, ki jo želite uporabiti kot cilj za prikaz 3D modela. Slika mora biti primerna za zaznavanje z AR tehnologijo.

S tem primerom in navodili bi morali biti sposobni ustvariti osnovno AR lekcijo. Če imate kakršna koli vprašanja ali potrebujete dodatno pomoč, se prosim obrnite na mene.