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:
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook
0
  • Bitcoin
  • Ethereum
  • Bitcoin cash
  • Tether
  • Stellar
Scan to Donate Bitcoin to 1L9sRKFJaXHQ8skQXR9b76KATmtEa9hsPn

Bitcoin!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin

Scan to Donate Ethereum to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Ethereum!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum

Scan to Donate Bitcoin cash to qqysclxkfj4wnrqepksydauq74lzud805v9zlptxa8

Bitcoin cash!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash

Scan to Donate Tether to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Tether!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether

Scan to Donate Stellar to GDIP3K46BRH3CDVGKDYWNEVHFI5LGG5MOBWU7QUCOCNOW4DJYIEMY2QC

Stellar!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar

¿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)