A-Frame da vida a la realidad virtual

La realidad virtual juega un papel cada vez más importante en la red mundial. JavaScript y los navegadores modernos hacen posibles los mundos tridimensionales. El marco de JavaScript A-Frame le permite crear realidades virtuales rápidamente, basándose en su propio lenguaje de marcado.

A-Frame: integrando JavaScript y construyendo su primer mundo 3D

En primer lugar, debe incorporar el Un cuadro archivo JavaScript en su cabecera HTML. El archivo comprimido tiene un tamaño aproximado de 700 kb y contiene todo lo que necesita. Otras bibliotecas, como jQuery, no son necesarias.

Luego, puede comenzar a crear un escenario dentro de su cuerpo HTML. Como A-Frame viene con su propio lenguaje de marcado, afortunadamente bastante similar a HTML, la creación de tu primer mundo 3D es muy fácil. Primero, dibuja un nuevo escenario con el elemento „“. Dentro de eso, puede colocar cualquier objeto 3D deseado como cubos („“), esferas („“) o cilindros („“).

<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
</a-scene>

En este ejemplo, una esfera, un cubo y un cilindro se colocan en el escenario. Puede utilizar atributos para definir el tamaño, el color, la posición y la rotación del objeto. El conjunto de parámetros para «posición» requiere tres valores para poder colocar un objeto en los ejes x, y y z. “rotación” también necesita tres valores que definen el ángulo de rotación en los tres ejes.

Ejemplo simple con esfera, cubo y cilindro

Dependiendo del tipo elegido, hay diferentes atributos disponibles para el tamaño de un objeto. Para „“, solo es necesario definir el radio (“radius”). „“ requiere información sobre las tres longitudes de borde (“ancho”, “alto” y “profundidad”). Para el cilindro, debe ingresar un radio y una altura («radio» y «altura»).

Experimentar la realidad virtual en teléfonos inteligentes, tabletas y Google Cardboard

Para permitir que el navegador muestre la realidad virtual, A-Frame traduce su lenguaje de marcado personalizado a un lienzo HTML5. En este ejemplo, el código fuente de A-Frame se convierte en un área de dibujo en la que el marco muestra el escenario utilizando los métodos de dibujo de JavaScript.

Tal como se supone que debe ser un mundo virtual, la tridimensionalidad de A-Frame no es estática, sino dinámica. En el escritorio, puede cambiar el ángulo del escenario con el mouse. Sin embargo, se vuelve fascinante cuando miras el paisaje con tu teléfono inteligente o tableta, ya que A-Frame interpreta la orientación de tu dispositivo y ajusta la perspectiva del paisaje en consecuencia.

Pantalla para Google Cardboard en un teléfono inteligente

Para un verdadero placer en 3D, también puede utilizar el modo VR en combinación con, por ejemplo, Google Cardboard. Al mirar un escenario creado en su dispositivo móvil, puede cambiar al modo VR usando un ícono con forma de anteojos. Luego, A-Frame muestra la vista dividida. Verá el mismo escenario tanto en el lado izquierdo como en el derecho, pero con puntos de vista ligeramente alterados. Al usar su teléfono inteligente con Google Cardboard, experimentará la verdadera realidad virtual.

A-Frame también funciona con Oculus Rift. Sin embargo, en este momento, es necesario instalar versiones experimentales de Firefox y Chrome, ya que los navegadores actuales no cuentan con la compatibilidad necesaria para WebVR. En cualquier caso, su navegador tiene que soportar WebGL para poder trabajar con A-Frame.

Agregar animaciones

A través de „“, puede agregar un objeto a una animación de una manera sencilla. Para hacerlo, se marca „“ como el elemento secundario del objeto que desea animar.

<a-cube position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="4" color="#4CC3D9">
  <a-animation attribute="rotation" to="0 360 0" dur="10000" fill="forwards" repeat="indefinite"></a-animation>
</a-cube>

En el ejemplo, un cubo gira 360 grados sobre el eje y. Para hacerlo, el tipo de animación se define mediante «atributo» y el objetivo de la animación se define mediante «a». «dur» define la duración y «fill» determina lo que debería suceder al final de la animación. El valor «hacia adelante» asegura que la animación no se restablezca al principio. “repetir” le permite establecer el número de repeticiones.

Cámara Propia, Luz, Interactividad y Materiales

A-Frame puede hacer mucho más de lo que presenté aquí. Si lo desea, puede agregar una cámara y una luz personalizadas, por ejemplo. Tienes la opción de establecer elementos interactivos y añadir materiales. Desafortunadamente, la documentación de A-Frame no está completa. Algunas de las opciones no se pueden encontrar allí todavía.

Panorámica de 360 ​​grados como VR

También puede implementar imágenes y videos. Esto le permite crear un panorama de 360 ​​grados como una realidad virtual, por ejemplo.

Conclusión

Un cuadro es un marco interesante para mundos de realidad virtual simples pero completamente complejos. El soporte de dispositivos móviles como Oculus Rift o Google Cardboard permite escenarios 3D vívidos. El funcionamiento de A-Frame es muy fácil. Mientras que otros marcos 3D requieren que codifique manualmente en JavaScript, con A-Frame, todo funciona mucho más simple debido al lenguaje de marcado único.

Además, hay muchos ejemplos fáciles y también complejos que muestran todas las opciones de A-Frame de forma detallada. A-Frame se distribuye bajo la popular y liberal licencia MIT. Por lo tanto, es posible el uso privado y comercial, incluso en proyectos de clientes.

(dpe)