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.
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!
Donate To Address
Donate Via Wallets- Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
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
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
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
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
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
Please Add coin wallet address in plugin settings panel
3 comentarios para “Realidad Virtual en Javascript con WebVR”
Dejar un comentario
¿Quieres saber más?
¡La mejor información en tu correo!
(proximamente importantes novedades)
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!!
Bueno, de esto si que no sabía. ¡Gracias!
Vaya! a probarlo, gracias tu sitio me mantiene al dia!