{"id":5282,"date":"2016-06-28T13:12:06","date_gmt":"2016-06-28T12:12:06","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=5282"},"modified":"2016-06-28T13:12:06","modified_gmt":"2016-06-28T12:12:06","slug":"a-frame-3d-y-realidad-virtual-en-la-web","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2016\/06\/a-frame-3d-y-realidad-virtual-en-la-web\/","title":{"rendered":"A-Frame, 3D y Realidad Virtual en la Web"},"content":{"rendered":"

Hola a todos y saludos desde el \u00e1rea Web de la Escola Espai<\/a>.\u00a0Normalmente el mundo de las 3 dimensiones en la web ha estado restringido a programadores con avanzados conocimientos de matem\u00e1ticas y que dominaban tecnolog\u00edas como WebGL<\/a>.\u00a0Hoy haremos una breve introducci\u00f3n a A-Frame<\/a>.<\/p>\n

Exploraremos las posibilidades que nos ofrece este novedoso framework basado en <\/span>HTML5<\/a>, que nos va a permitir introducir elementos <\/span>3D<\/strong> y de <\/span>Realidad Virtual<\/strong> en nuestras paginas web <\/span>de forma sencilla<\/strong> (<\/span>sin necesidad de escribir c\u00f3digo JavaScript<\/a>!).<\/span><\/p>\n

3D en HTML5<\/h2>\n

La promesa de 3D en la Web no es algo nuevo. Ya nos la ofrec\u00eda en su momento Adobe con su producto Shockwave<\/a>, aunque actualmente su futuro es mas\u00a0negro incluso que el de Flash<\/a>. El hecho de ser un producto cerrado, inestable y con serios problemas de seguridad no le a ayudado mucho.<\/p>\n

Con la llegada de HTML5 y su elemento Canvas<\/a>, surgio la posibilidad de emplear WebGL para mostrar contendo 3D en la Web de forma nativa<\/strong>. Sin embargo, programar en WebGL no es precisamente f\u00e1cil. Algo, aparentemente tan sencillo, como mostrar un cubo 3D, requiere ser capaz de programar shaders<\/a>, que son peque\u00f1os programas para la tarjeta gr\u00e1fica donde le indicamos cosas tales como las operaciones de transformaci\u00f3n para los v\u00e9rtices y los p\u00edxeles. Si bien es cierto que estos shaders a\u00f1aden una capa extra de complejidad al desarrollo 3D, tambi\u00e9n es cierto que ofrecen m\u00faltiples posibilidades muy interesantes. Sea como sea, el tema es que programar WebGL no es f\u00e1cil y eso ha desincentivado el desarrollo 3D en la Web.<\/p>\n

Obviamente, no tardaron en salir frameworks y librer\u00edas JavaScript que facilitan dicha tarea. La m\u00e1s famosa actualmente probablemente sea three.js<\/a>. Vale la pena pasearse por su web y\u00a0ver en su secci\u00f3n de \u00abfeatured projects\u00bb<\/strong> la de cosas incre\u00edbles que es posible hacer hoy d\u00eda con est\u00e1 tecnolog\u00eda. Tambi\u00e9n es muy recomendable visitar su secci\u00f3n de ejemplos<\/a>, menos espectacular, pero m\u00e1s ilustrativa.<\/p>\n

Sin embargo, incluso con estos frameworks, no resulta muy f\u00e1cil introducir elementos 3D en una Web, y mucho menos sin saber programar JavaScript.<\/p>\n

A-Frame y el 3D sin JavaScript<\/h2>\n

A-Frame viene para introducir una aproximaci\u00f3n diferente al mundo del 3D en la Web, ya que se basa en HTML<\/strong>. Los elementos 3D que vamos a introducir, los introduciremos del mismo modo que cualquier otro elemento HTML<\/strong>.<\/p>\n

\"A-Frame<\/a>

A-Frame, un sencillo framework para 3D y Realidad Virtual en la Web<\/p><\/div>\n

Veamos un\u00a0sencillo ejemplo;<\/p>\n

<!DOCTYPE html><\/code>
\n<html><\/code>
\n <head><\/code>
\n\u00a0 <meta charset=\"utf-8\"><\/code>
\n\u00a0 <title>Ejemplo b\u00e1sico A-Frame<\/title><\/code>
\n\u00a0 <script src=\"https:\/\/aframe.io\/releases\/0.2.0\/aframe.min.js\"><\/script><\/code>
\n <\/head><\/code>
\n <body><\/code>
\n\u00a0 <a-scene><\/code>
\n\u00a0 \u00a0 <a-box id=\"cubo\" width=\"1\" height=\"1\" depth=\"1\" color=\"red\"><\/a-box><\/code>
\n\u00a0 <\/a-scene><\/code>
\n <\/body><\/code>
\n<\/html><\/code><\/div>\n

Pod\u00e9is ver\u00a0el resultado del c\u00f3digo aqu\u00ed<\/a>.<\/p>\n

Como pod\u00e9is comprobar es extremadamente f\u00e1cil. Con ese sencillo ejemplo ya tenemos un bonito cubo 3D de color rojo; si mantenemos pulsado el bot\u00f3n del rat\u00f3n, podremos cambiar la orientaci\u00f3n de la c\u00e1mara<\/strong> y si pulsamos las teclas WASD<\/strong>, nos podremos desplazar por el escenario<\/strong> 3D. Finalmente, si pulsamos el bot\u00f3n de abajo a la derecha con el dibujo de unas Cardboard<\/a>\u00a0y nuestro dispositivo lo soporta (por ejemplo, un m\u00f3vil Android con el navegador Chrome<\/strong>), podremos iniciar el modo de Realidad Virtual<\/strong>.<\/p>\n

As\u00ed, tal cual. De esa forma tan sencilla y sin c\u00f3digo JavaScript.<\/p>\n

Obviamente, adem\u00e1s de las cajas, existen muchos m\u00e1s elementos A-Frame. Tambi\u00e9n podemos crear;<\/p>\n