Como agregar botones a nuestra aplicacion de realidad aumentada en AR.js

¡Hola Aumentados! Sean todos bienvenidos a este nuevo videotutorial.

El día de hoy vamos a aprender a agregar botones a nuestra aplicación de realidad aumentada utilizando la librería AR.js

Si te gusto este y mis otros videotutoriales, recuerda seguirme en mi canal de YouTube, es de gran ayuda.

Canal de Youtube

Realidad Aumentada Empezando desde cero

También puedes seguirme en el fan page de Facebook:

FAN PAGE FACEBOOK

Esta aplicación de Realidad Aumentada funciona para:

• Dispositivos móviles Android (Google).
• Dispositivos móviles iOS (Apple).
• Desktops y Laptop (Computadores de mesa y portátiles).

Básicamente lo que hago como en todos mis tutoriales es explicar línea por línea de código, siempre me preocupo por escribirlo y compartilo de la manera mas simple posible.

• Si lo se !!! Tal vez para muchas personas que visitan el blog y siguen mis tutoriales se dan cuenta que se pueden realizar muchas más cosas a nivel de código y utilizar código mucho más complejo, pero lo realizo de esta manera para que las personas que apenas están iniciando en este mundo de la realidad aumentada tengan la posibilidad de aprender y hacer aplicaciones fáciles y no sientan frustración a la hora de aprender esta tecnología.

Empezamos con el video tutorial:

Codigo nuevo que utlizamos en esta App de AR:

• – – <style> .button { Codigo para darle caracteristicas a mi boton, color, texto, tamaño, sombras, bordes, etc } </style>

Codigo para cuando nuestro marcador sea detectado por la camara inicie (play) nuestro video, Ademas de ello muestra en consola la palabra (Found).

• • • – –  var m = document.querySelector(«a-marker»)

            m.addEventListener(«markerFound», (e)=>{

            console.log(«found»)

            var v = document.querySelector(‘#mivideo’).play();

Codigo para cuando nuestro marcador NO sea detectado por la camara detenga (pause) nuestro video, Ademas de ello muestra en consola la palabra (Lost).

• • • – – m.addEventListener(«markerLost», (e)=>{
            console.log(«lost»)

            var v = document.querySelector(‘#mivideo’).pause();

Codigo simple para agregar una actividad al boton que creamos previamente.

• • •  – – document.getElementById(«btn1»).addEventListener(«click», (e)=>{
            var v = document.querySelector(‘#mivideo’).muted=false;})

Para que estos Codigos sean mas entendibles puedes visitar todo el videotutorial en el siguiente video.

Solo da clic en la imagen y seras redireccionado a youtube.

Archivos de este videtutorial para descagar

Clic en el link: DESCARGAR

otro tutorial que te pueda interesar: Como hacer un portal a otra dimension en realidad aumentada – Augmented reality portal