!
In questo video voglio mostrarti come creare una semplice Web App in Realtà Aumentata con solo poche righe di HTML.
Se vuoi ottenere l'effetto mostrato nel video ti basterà creare una semplice Web app. Con Google Apps Script puoi farlo in meno di 3 minuti ed il codice da utilizzare è semplicemente quello che vedi:
Codice.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('ar_marker.html');
}index.html
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-box color="yellow" position='0 0.5 0' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>Per maggiori dettagli su come creare una Web app trovi il processo passo passo nel video dedicato presente nel seguente articolo: https://www.appsscript.it/tutorial/crea-una-web-app-in-3-minuti-con-google-apps-script/
Tornando al topic in oggetto, il codice nel file di script non fa altro che richiamare il file HTML dentro il quale sono presenti i riferimenti a risorse esterne per abilitare la logica della Realtà Aumentata.
In particolare, lo script fa uso di A-Frame, un framework web per la creazione di esperienze di realtà virtuale (VR) basato sull'HTML, e della libreria ar.js per A-Frame.
Nel body è presente il tipo di contenuto da mostrare con la realtà aumentata, in questo caso come abbiamo visto si tratta di un cubo ma possono essere mostrati oggetti ben più complessi, e il codice per definire il modello di spostamento della telecamera in base alla posizione del marker, che nel caso specifico è l’immagine con la scritta Hiro.
Avviando l'applicazione dal proprio computer e aprendo l'immagine del marker dallo smartphone... il risultato è quello che abbiamo visto a inizio video.
Andando ad agire sull'HTML è possibile cambiare il colore, possiamo ad esempio far diventare il cubo di colore giallo definendo yellow il valore dell’attributo color. Altre personalizzazioni possono essere fatte sulla posizione dell’elemento, sulla sua rotazione e sull'opacità nonché modificando da a-box in a-sphere l'oggetto si trasforma in una sfera. Prova tu stesso!
Ti lascio il link di un interessante articolo sul blog di A-Frame dove puoi trovare altri esempi e riferimenti più avanzati per approfondire il mondo della Realtà Aumentata: https://aframe.io/blog/arjs/
Fammi sapere nei commenti cosa ne pensi di questo articolo e ci vediamo al prossimo video (iscriviti al canale per rimanere aggiornato sulle prossime uscite!).
Non ci sono commenti
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
scrivi un commento