Hoy vamos a aprender cómo utilizar a nivel básico uno de los Generic Enablers que están a nuestra disposición en FIWARE. Se trata del WEB-UI-XML3D, encargado de llevar los objetos a su tercera dimensión en nuestros navegadores web.

Lo que necesitaremos será:

• Un navegador que soporte webGL (Firefox, Chrome, Safari…).
• El programa de diseño 3D «Blender«.
• El addon para Blender de xml3d.
• Un editor de texto para la programación.

Lo primero que necesitaremos será un modelo 3D con el que comenzar. Para ello tenemos dos opciones: o lo diseñamos, o lo descargamos.

En este ejemplo nos hemos descargado un archivo de la página Archive3D, concretamente una lámpara, que podemos encontrar aquí.

[fusion_builder_container hundred_percent=»yes» overflow=»visible»][fusion_builder_row][fusion_builder_column type=»1_1″ background_position=»left top» background_color=»» border_size=»» border_color=»» border_style=»solid» spacing=»yes» background_image=»» background_repeat=»no-repeat» padding=»» margin_top=»0px» margin_bottom=»0px» class=»» id=»» animation_type=»» animation_speed=»0.3″ animation_direction=»left» hide_on_mobile=»no» center_content=»no» min_height=»none»]

Modelo Lámpara 3D

Es la hora, pues, de abrir Blender. Una vez dentro, para importar el archivo le daremos a file y luego a import, seleccionamos 3ds y a continuación el archivo.

[/fusion_builder_column][fusion_builder_column type=»1_1″ background_position=»left top» background_color=»» border_size=»» border_color=»» border_style=»solid» spacing=»yes» background_image=»» background_repeat=»no-repeat» padding=»» margin_top=»0px» margin_bottom=»0px» class=»» id=»» animation_type=»» animation_speed=»0.3″ animation_direction=»left» hide_on_mobile=»no» center_content=»no» min_height=»none»]

Lámpara 3D importada en Blender

Una vez tenemos el modelo 3d debemos exportarlo a formato xhtml, pero para esto necesitamos instalar un add-on de Blender. Lo podemos encontrar y descargar en GitHub: Blender-Exporter.

Aunque la explicación de cómo instalar los Add-on de Blender está disponible en el enlace anterior, detallaremos a continuación los pasos para hacerlo:

Tras descargar el archivo, tendremos que copiar la carpeta «io_scene_xml3d», que se encuentra en la siguiente ruta de nuestro archivo descargado: /org.xml3d.exporter.blender/src/2.62+/

Una vez copiamos la carpeta, la tenemos que pegar dentro de la aplicación Blender en la siguiente ruta (dependiendo de vuestro sistema operativo, la ruta de instalación y la versión):

C:/Program Files/Blender Foundation/2.74/scripts/addons

Hecho esto, nos vamos a Blender, entramos en Preferencias de Usuario (Archivo -> Preferencias de usuario), y se abrirá la siguiente ventana:

[/fusion_builder_column][fusion_builder_column type=»1_1″ background_position=»left top» background_color=»» border_size=»» border_color=»» border_style=»solid» spacing=»yes» background_image=»» background_repeat=»no-repeat» padding=»» margin_top=»0px» margin_bottom=»0px» class=»» id=»» animation_type=»» animation_speed=»0.3″ animation_direction=»left» hide_on_mobile=»no» center_content=»no» min_height=»none»]

Preferencias de Usuario de Blender

En el campo de búsqueda, escribiremos «xml3d» y tendremos que activar la casilla que aparece a la derecha, cerrar la ventana, y recargar los add-ons, pulsando la tecla F8.

[/fusion_builder_column][fusion_builder_column type=»1_1″ background_position=»left top» background_color=»» border_size=»» border_color=»» border_style=»solid» spacing=»yes» background_image=»» background_repeat=»no-repeat» padding=»» margin_top=»0px» margin_bottom=»0px» class=»» id=»» animation_type=»» animation_speed=»0.3″ animation_direction=»left» hide_on_mobile=»no» center_content=»no» min_height=»none»]

Exportando Modelo en Blender

¡Hecho! ya podemos exportar nuestro archivo en xhtml. Para hacerlo, tendremos que darle a File -> Export -> XML3D.

Hasta ahora sólo hemos dejado listo nuestro modelo. Lo realmente interesante, que es la integración en un navegador y empezar a utilizar el enabler de FIWARE, lo veremos en la siguiente parte de esta entrada.

Ir a la parte 2. (Próximamente)[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]