Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 182 vistas

    Crear Realidad Aumentada Con AFrame y AR

    Cargado por

    abel
    El documento describe cómo crear experiencias de realidad aumentada utilizando las bibliotecas AR.js y A-Frame. Explica que AR.js es una biblioteca liviana para realidad aumentada en la web que funciona bien con A-Frame, la cual es una biblioteca para crear experiencias de realidad virtual. Luego proporciona un ejemplo de código para crear un marcador que muestra una esfera al escanear una imagen, demostrando el uso conjunto de estas bibliotecas.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Crear Realidad Aumentada Con AFrame y AR

    Cargado por

    abel
    182 vistas5 páginas
    El documento describe cómo crear experiencias de realidad aumentada utilizando las bibliotecas AR.js y A-Frame. Explica que AR.js es una biblioteca liviana para realidad aumentada en la web que funciona bien con A-Frame, la cual es una biblioteca para crear experiencias de realidad virtual. Luego proporciona un ejemplo de código para crear un marcador que muestra una esfera al escanear una imagen, demostrando el uso conjunto de estas bibliotecas.

    Descripción original:

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    El documento describe cómo crear experiencias de realidad aumentada utilizando las bibliotecas AR.js y A-Frame. Explica que AR.js es una biblioteca liviana para realidad aumentada en la web que funciona bien con A-Frame, la cual es una biblioteca para crear experiencias de realidad virtual. Luego proporciona un ejemplo de código para crear un marcador que muestra una esfera al escanear una imagen, demostrando el uso conjunto de estas bibliotecas.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    182 vistas5 páginas

    Crear Realidad Aumentada Con AFrame y AR

    Cargado por

    abel
    El documento describe cómo crear experiencias de realidad aumentada utilizando las bibliotecas AR.js y A-Frame. Explica que AR.js es una biblioteca liviana para realidad aumentada en la web que funciona bien con A-Frame, la cual es una biblioteca para crear experiencias de realidad virtual. Luego proporciona un ejemplo de código para crear un marcador que muestra una esfera al escanear una imagen, demostrando el uso conjunto de estas bibliotecas.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    de 5

    Crear realidad aumentada con AFrame

    y AR.JS
    Hola a todos hoy traigo un demo interesante sobre como AR.JS y A-
    Frame. Llevo un par de días investigando acerca de realidad
    aumentada en la web, ya que existen muchos frameworks y
    herramientas muy útiles para crear contenido de realidad
    aumentada, pero muchos de estos son más complicados de utilizar
    para principiantes o son herramientas de pago un tanto caras para
    ser utilizadas por usuarios normales.
    En toda esta búsqueda encontré AR.JS la cual es una biblioteca liviana
    para Realidad Aumentada en la Web, que viene con características
    como seguimiento de imágenes, AR basado en ubicación y
    seguimiento de marcadores. Lo interesante de esta librera es que se
    lleva muy bien con A-Frame la cual es una librería para crear
    experiencias de realidad virtual en la web.
    A-Frame es un framework web para construir experiencias de
    realidad virtual (VR) el equipo de Mozilla VR desarrolló A-Frame para
    ser la forma más fácil y poderosa de desarrollar contenido WebVR.
    Como un proyecto totalmente abierto, A-Frame ha crecido hasta
    convertirse en una de las comunidades de VR más grandes y
    acogedoras.

    Para crear contenido en realidad aumentada utilizando A-Frame es


    posible utilizarlo de dos formas

     AR.js con seguimiento de imagen + AR basado en


    ubicación
     AR.js con Seguimiento de marcadores + AR basádo en
    ubicación (Marker Tracking + Location Based AR)

    AR.js funciona tanto con A-Frame como con three.js. si quieres saber


    más sobre cómo utilizar esta librería consulta la documentación
    oficial https://ar-js-org.github.io/AR.js-Docs/.
    En el siguiente ejemplo vamos a probar AR.js utilizando marcador. Un
    marcador es un objeto impreso con una figura la cual al ser
    escaneada con la cámara mostrara el objeto tridimensional que
    hallamos creado en A-Frame. Recuerda que tenemos que correr estos
    ejemplos en un servidor web.
    Lo primero que hay que hacer es poner código HTML las etiquetas
    básicas e incluimos la version de AR.JS que queremos utilizar. para
    este ejemplo la etiqueta de marker based y la etiqueta de A-Frame
    <!DOCTYPE html>

    <html>

    <head>

    <!-- script de A-Frane version1 1.0.0 -->

    https://aframe.io/releases/1.0.0/aframe.min.js

    <!-- script de AR.JS con soporte de marker + location -->

    https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js

    </head>

    <body style="margin : 0px; overflow: hidden;">

    </body>

    </html>

    Luego de eso es necesario agregar una escena de AFrame incluyendo


    los parametros de arjs.
    <a-scene embedded arjs>

    </a-scene>

    dentro de la escena agregamos un marcador de tipo hiro (puedes


    descargar la imagen de este
    enlace: https://raw.githubusercontent.com/AR-js-
    org/AR.js/master/data/images/hiro.png)
    <a-marker preset="hiro">

    </a-marker>

    dentro del marcador de hiro pondremos una esfera que se


    proyectará en la imagen.
    <a-sphere position="0 0 0" radius="1.25" color="#EF2D5E"></a-sphere>

    el código completo quedaría así:


    <!DOCTYPE html>

    <html>

    <head>

    <!-- script de A-Frane version1 1.0.0 -->

    https://aframe.io/releases/1.0.4/aframe.min.js

    <!-- script de AR.JS con soporte de marker + location -->


    https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js

    </head>

    <body style="margin : 0px; overflow: hidden;">

    <a-scene embedded arjs>

    <a-marker preset="hiro">

    <a-sphere position="0 0 0" radius="0.6" color="#EF2D5E"></a-sphere>

    </a-marker>

    <a-entity camera></a-entity>

    </a-scene>

    </body>

    </html>

    Al momento de escanear la imagen con el celular se vería de la


    siguiente manera:
     Si quieres acceder a este ejemplo puedes consultar este
    repositorio en
    Github: https://github.com/daviddagb2/DemosAR/tree/master/dem
    o001
     Demo en
    github: https://daviddagb2.github.io/AR/demos/demo001/

    También podría gustarte