MICHELEPISANI.IT
 

Ti basteranno 8 righe di codice!

Realtà Aumentata in 3 minuti con solo HTML

Novembre 16
07:372021

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:

Per il codice da COPIARE e INCOLLARE ti rimando all'articolo dedicato sul mio blog Apps Script Italia: https://www.appsscript.it/tutorial/realt%C3%A0-aumentata-in-3-minuti-con-google-apps-script/

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!).

 

Tags

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Il Canale YouTube in ITALIANO

1 VIDEO GRATIS ogni 2 settimane! ISCRIVITI!

Entra a far parte della community su Facebook

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Christian Beni

Ciao Michele, volevo porti una domanda. Ho cambiato nome ad una pagina che per molto tempo era …

Max

ciao michele, sono in difficoltà: vorrei che scegliendo una città da un form si generasse una url …

Francesco Raimondi

non riesco a capire perché mi da errore, ho fatto meno fatica a creare un paio di applicazioni con …

Michele Pisani

Ciao Emma, proverei a passare ad un account business, lì sicuramente l'assistenza per risolvere …