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:
¡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>
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í:
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!»
¡Eso es todo! Con esto se abre un mundo de posibilidades para interactuar con los objetos 3D en nuestros navegadores.
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ó.
Me alegro que te haya gustado Juan. Gracias por tu comentario!