Modelado 3D parte 2 con FIWARE

por | Abr 28, 2015 | FIWARE | 2 Comentarios

Como continuación del blogpost anterior sobre modelado 3D con FIWARE, hoy veremos cómo integrar los pasos anteriores dentro de un navegador web utilizando WEB-UI-XML3D.

Asumimos que ya tenemos correctamente exportado nuestro modelo 3D en formato xhtml. Este archivo incluirá, entre otras cosas, una serie de números contenidos entre unas etiquetas

<data>...</data>

Estos números son la definición de nuestro objeto, en el caso anterior, una lámpara.

Para integrarlo en un navegador, lo iremos haciendo paso por paso. Primero, empezaremos una página en blanco con html básico. A continuación el código

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://www.xml3d.org/xml3d/script/xml3d.js"></script>
<script type="text/javascript" src="https://www.xml3d.org/xml3d/script/tools/camera.js"></script>
<script xmlns="https://www.w3.org/1999/xhtml" type="text/javascript" src="media/js/jquery-ui.min.js"></script> <title>Mi primera aplicación 3D</title>
<body>
¡Hola Mundo!
</body>
</html>

Ahora en lugar de «¡Hola Mundo!» tendremos que poner nuestro objeto 3D en formato xhtml, es decir, copiaremos el código de nuestro archivo exportado entre las etiquetas

<body>

Si ahora abrimos nuestro navegador no nos saldrá nada, ya que debemos definir un punto de vista para nuestro objeto. La parte de código donde se define dicho punto está definida de la siguiente manera:

<view fieldOfView="0.857556" id="Camera" orientation="0.772239 0.341341 0.535848 1.347139" position="7.481232 -6.494221 5.354368"/>

Estas coordenadas están directamente exportadas con una opción de Blender, pero podemos jugar con la perspectiva todo lo que queramos.

Es el momento de visualizar nuestra lámpara en el navegador, que quedaría de la siguiente manera:

Lámpara sin luz

¡Parece que ya va tomando forma!

Además, gracias a una de las primeras líneas de nuestro código que añadimos en la cabecera, podemos girar el objeto. El responsable de esta acción es la línea que contiene el código:

<script type="text/javascript" src="https://www.xml3d.org/xml3d/script/tools/camera.js"></script>

Lámpara girada

Pero… este modelo tiene un color raro, ¿verdad?

Esto es porque no están definidas las texturas, sombras y luces del objeto. Lo haremos definiendo «shaders» y «lights».

Para ello debemos saber que en nuestro objeto están definidos distintos «mesh», o formas, agrupados dentro de un mismo grupo, que conformaría la lámpara, que son los que están agrupados dentro de las etiquetas data. Ahora definiremos lo siguiente:

<shader id="Ceram" script="urn:xml3d:shader:phong">
<lightshader id="light1" script="urn:xml3d:lightshader:directional">
<float3 name="intensity"> 1 1 1</float3>
</lightshader>
<float3 name="diffuseColor">
0.917647 0.913725 0.968627
</float3>
<float name="ambientIntensity">
0.0
</float>
<float3 name="specularColor">
0.043137 0.043137 0.043137
</float3>
<float name="shininess">
0.09784735812133072
</float>
</shader>
<shader id="chrome08 210"script="urn:xml3d:shader:phong">
<lightshader id="light1" script="urn:xml3d:lightshader:directional">
<float3 name="intensity"> 1 1 1</float3>
</lightshader>
<float3 name="diffuseColor">
0.917647 0.913725 0.968627
</float3>
<float name="ambientIntensity">
0.2
</float>
<float3 name="specularColor">
0.345098 0.345098 0.345098
</float3>
<float name="shininess">
0.09784735812133072
</float>
</shader>
<shader id="lamp_svet"script="urn:xml3d:shader:phong">
<lightshader id="light1" script="urn:xml3d:lightshader:directional">
<float3 name="intensity"> 1 1 1</float3>
</lightshader>
<float3 name="diffuseColor">
0.917647 0.913725 0.968627
</float3>
<float name="ambientIntensity">
0.0
</float>
<float3 name="specularColor">
0.345098 0.345098 0.345098
</float3>
<float name="shininess">
0.09784735812133072
</float>
</shader>
<light shader="#light1"></light>

y nuestra lámpara, finalmente, quedaría así:

Lámpara con luzLámpara con luz girada

Lampara movimiento

Por último, vamos a añadir alguna función sobre nuestro objeto para interactuar con él.

Le insertaremos a nuestro objeto dentro de la etiqueta mesh donde está definido una llamada a una función JavaScript. Si echamos un vistazo a nuestro código, habrá una serie de agrupaciones bajo las etiquetas group. En nuestro ejemplo:

<group id="$$DUMMY.Group01" transform="#t_$$DUMMY.Group01" onclick="mouseClick(event)">
<group id="obj_05" transform="#t_obj_05">
<group shader="#Ceram">
<mesh src="#mesh_obj_05_Ceram" type="triangles"/>
</group>
</group>
<group id="obj_01" transform="#t_obj_01">
<group shader="#chrome08 210">
<mesh src="#mesh_obj_01_chrome08 210" type="triangles"/>
</group>
</group>
<group id="obj_02" transform="#t_obj_02">
<group shader="#chrome08 210">
<mesh src="#mesh_obj_02_chrome08 210" type="triangles"/>
</group>
</group>
<group id="obj_03" transform="#t_obj_03">
<group shader="#Ceram">
<mesh src="#mesh_obj_03_Ceram" type="triangles"/>
</group>
</group>
<group id="obj_04" transform="#t_obj_04">
<group shader="#lamp_svet">
<mesh src="#mesh_obj_04_lamp_svet" type="triangles"/>
</group>
</group>
</group>

Hemos aprovechado a definir la llamada a la función resaltada en negrita. Esta función la definiremos, por ejemplo, en el head, entre las etiquetas <script> :

<script type="text/javascript">
function mouseClick (event){
alert("Hola mundo!");
}
</script>

Y a continuación podremos ver que al hacer click en la lámpara nos aparece una ventana emergente con el mensaje «Hola mundo!»

Alerta con Java

¡Eso es todo! Con esto se abre un mundo de posibilidades para interactuar con los objetos 3D en nuestros navegadores.

2 Comentarios

  1. juan

    Me ha gustado mucho el artículo. El modelado en 3D es lo que hacen los escultores de hoy en día, en ese futuro que ya llegó.

    Responder
    • Jose Benítez

      Me alegro que te haya gustado Juan. Gracias por tu comentario!

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Conoce conceptos clave de la era digital en nuestro HUB

 

 

Descarga nuestro ebook con todo lo que necesitas saber sobre IoT Industrial.

Suscríbete a nuestra newsletter

Recibe las últimas noticias sobre innovación y nuevas tecnologías y mantente al día de los avances más destacados

Cesión de datos

Calle Factores 2, 41015 Seville

Phone: +34 618 72 13 58

Email: info@secmotic.com

MENU

We are

We do

Blog

Contact