htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Realidad Virtual en Javascript con WebVR

Realidad Virtual en Javascript con WebVR

La realidad virtual en la web es posible gracias a WebVR, un estándar abierto que ya se puede usar en nuestros sitios tanto para juegos, tours u otro tipo de experiencias 3D.

Cómo experimentar realidad virtual en la web

No requieres de mucho para usar WebVR, solo de un navegador compatible y de un visor (o headset en inglés).

Actualmente ya existen varios visores, desde lo más básico como el Google Cardboard, otros más avanzados como HTC Vive o algo intermedio como Google Daydream. Algunos los puedes utilizar con tu móvil y otros se conectan al ordenador.

Si no tienes visor

Si no dispones de un headset, puedes ver algunas web en 360 grados en tu móvil u ordenador, pero obviamente no será lo mismo.

WebVR, la API javascript

La API WebVR nos permite a los desarrolladores exponer dispositivos de realidad virtual a sitios y aplicaciones web. Entonces la posición y el movimiento del dispositivo serán ‘transformados’ en movimiento alrededor de una escena 3D.

Código VR

Simplemente para que te hagas una idea:
– Para obtener un objeto VRDisplay que represente a nuestro dispositivo, utilizamos

1
Navigator.getVRDisplays() // objeto VRDisplay

– Una vez tenemos nuestro objeto VRDisplay, este será la interface principal con propiedades y métodos para acceder a las diferentes funcionalidades.

Si quieres ver un ejemplo de código básico aquí.

Frameworks, la forma más fácil de comenzar con VR en web

En mi opinión, la forma más fácil de comenzar a desarrollar experiencias 3D para la web, es utilizando uno de los frameworks ya disponibles. Te será increíblemente más fácil, tan solo mira los ejemplos en sus sitios.

A-frame, framework de WEbVR

El más popular de estos frameworks es A-frame, el cual utiliza componentes (como hacen React o VueJS), como si fuesen simples elementos HTML. Aquí el código de una escena super básica para que te hagas una idea:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box
       position="-1 0.5 -3"
       rotation="0 45 0"
       color="#4CC3D9"
     ></a-box>
      <a-sphere
       position="0 1.25 -5"
       radius="1.25"
       color="#EF2D5E"
     ></a-sphere>
      <a-cylinder
       position="1 0.75 -3"
       radius="0.5"
       height="1.5"
       color="#FFC65D"
     ></a-cylinder>
      <a-plane
       position="0 0 -4"
       rotation="-90 0 0"
       width="4"
       height="4"
       color="#7BC8A4"
     ></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Aquí verás la demo de este ejemplo. Si, lo sé, muy básico, pero también mira lo simple que es el código.

Puedes ver muchos más ejemplos en el sitio web de A-frame.

Conclusión

La realidad virtual ya se puede desarrollar con JS. Si bien todavía tiene mucho que evolucionar, cada vez más será más soportada. Lo único que necesitarás para utilizarla será tu conocimiento de javascript.
¡Dejame tu comentario a ver que te parece este tema!

Comparte conocimiento:
Share on twitter
Twitter
Share on linkedin
Linkedin
0
Share on facebook
Facebook
0
Share on google
Google
Please Add coin wallet address in plugin settings panel
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

3 comentarios para “Realidad Virtual en Javascript con WebVR”

  1. Rafer dice:

    Esto es excelente, ya habia escuchado que incluso se podría trasladar trabajos de Unity a la web.
    E incluso creo que se pondrá mejor cuando los nuevos móviles soporten ARKit en el iphone y ArCode en android!!

  2. The Camila dice:

    Bueno, de esto si que no sabía. ¡Gracias!

  3. Santiago dice:

    Vaya! a probarlo, gracias tu sitio me mantiene al dia!

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)