Introducción a WPF, y creación de una aplicación WPF 3-D, parte 5 de N

 

Vale, qué tal a todos?? Hace ya un buen tiempo que no posteo, pero es que he estado un poco ocupado aprendiendo y comprendiendo varios recursos que en futuras entradas les mostraré.

Pero bien, en lo que estabamos, la entrada pasada había quedado hecha nuestra grilla con 4 botones, si alguien gusta bajarse el proyecto hasta aquí hecho, pueden descargarlo de aquí:

LINK: Aplicacion%203-d.rar-download

Ok, seguimos adelante, lo que vamos a hacer ahora, es empezar a insertar nuestras imágenes de los planos del edificio.

Tradicionalmente, los planos del edificio se verían algo así:

cisco_planta_baja

Qué dicen? Un poco sencillo no? Lo que nosotros queremos es recrear estos planos en un modelo tridimensional y de una manera muy sencilla, para ello, vamos a ir a Blend, abrimos nuestro proyecto que llevamos hasta aquí, y vamos a darle click derecho sobre nuestro proyecto y a continuación Add New Folder:

addnewfolder

Después de esto, nos pedirá el nombre de la carpeta, le llamaremos “Imagenes” (sin las comillas), si por error no le has puesto nombre, puedes renombrarla haciendo doble click sobre el nombre actual de la carpeta.

Para motivos de este proyecto, aquí están las imagenes que usaré en el proyecto, si es que quieres ir haciendo el proyecto a mi paso:

 

LINK FOLDER IMAGENES: Images.rar-download

 

Ahora, lo que haremos es pasar a blend las imagenes que usaremos, esto lo podemos hacer dando click derecho sobre la carpeta “Imagenes”, y posteriormente en la opción “Add existing item…”. Vamos a la carpeta de las imagenes y seleccionamos todas, posteriormente damos click en abrir.

Hasta ahora, tu explorador del proyecto debe verse algo asi:

imagenes1

Ahora sí, viene lo interesante, vamos a dar doble click sobre la imagen “cisco_planta_baja.jpg”, esto debe de insertar la imagen dentro de nuestra ventana de la aplicación.

cisco_planta_baja1

El tamaño de la imagen es mucho mas grande que nuestra ventana, por lo cual debemos reajustarla con los siguientes valores:

layout1

Básicamente, lo que hemos hecho es ubicar la imagen en la columna # 1 (recuerden que hemos creado 2 columnas, y que WPF comienza a enumerar regularmente las cosas desde 0, por lo cual la imagen queda en la columna 1 (que en realidad es la segunda), y hemos ajustado los márgenes a 0, por lo que debería verse algo así:

window1

Bien, ahora lo que haremos será ir al menú con la imagen seleccionada, damos click sobre Tools y posteriormente en la opción “Make Image 3D”.

En principio no veremos nada extraño, pero si vamos a nuestro panel de Object and Timeline, notaremos que se nos ha creado un Viewport 3D. Este será nuestro contenedor principal, si expandimos mas nuestros nodos, llegaremos hasta nuestra imagen del principio, con el nombre de Model(Parte marcada con verde), que es en realidad el modelo que hemos creado para la imagen:

ed1

Ahora bien, al momento de seleccionar Model, aparecen unas flechas sobre nuestra imagen (circulado con rojo en la imagen anterior), estas flechas son las encargadas de mover nuestro objeto 3D hacia donde queramos, puedes intentarlo si quieres, regresando al estado original con Ctrl+Z.

3d2

Empieza a ser sorpendente no? Ok, vamos a nuestro explorador y renombramos nuestro objeto “[Viewport3D]” por “PlantaBaja”.

Procedemos a hacer lo mismo con las imagenes “cisco_planta_segundab.jpg” , “cisco_planta_primera.jpg” y “cisco_planta_baja.jpg”, renombrando cada Viewport 3D con su respectivo nombre, te debe quedar algo asi:

renombrado

Ahora, para facilitarnos las cosas y tenerlas mas ordenadas, vamos a agrupar nuestros ViewPorts dentro de una grilla, seleccionamos los 4 elementos y damos click derecho -> Group Into -> Grid. A esta grilla la llamaremos “Objetos 3D”.

Bien, vamos a modificar nuestros modelos para dar la apariencia deseada, colocando una planta debajo de la otra, para simular las plantas del edificio. seleccionamos sobre nuestro Viewport “PlantaBaja”, y expandimos su nodo, hasta llegar al llamado “[PerspectiveCamera]”, que es el encargado de manejar las camaras de los objetos 3D:

camara1

Si observamos, existen otras propiedades en los elementos 3D, como el ModelContainer(encargado de almacenar los objetos, bien una imagen, un botón, etc), el AmbientContainer (Que mantiene los colores “ambientales”) y el DirectionalContainer.

Ahora, manejaremos nuestra cámara para que nos dé el ángulo necesario, teniendo seleccionada esta opción, vamos a modificar la opción Transform de las propiedades, y sobre la pestaña Rotate, colocamos 64 sobre la rotación de las X:

transform

Esto hará que nuestra cámara se ponga en una perspectiva diferente. Hacemos lo mismo con las cámaras de los otros objetos Viewport 3D. Ten cuidado que sea el elemento Rotate el seleccionado para colocar el valor 64, y no te preocupes si los objetos “desaparecen” de la escena de repente. Algo así te debe de quedar:

3d3

Ok, ahora es simple cuestión de acomodar cada uno de los objetos, seleccionamos nuestro ViewPort llamado “PlantaBaja”, y lo arrastramos hacia abajo, acomodamos nuestros Viewports para que queden uno encima de otro:

3d4

Sí sí, sé que has de decir que aún se ve feo, vamos a arreglar eso; seleccionamos nuestros 4 Viewport 3D, y manteniendo la tecla shift apretada, reducimos el tamaño de nuestros ViewPorts y los acomodamos para que se vea un poco mas estilizado todo:

3d5

Ok, ahora ocurre un problema, nuestras imágenes aparecen cortadas, esto se resuelve de una manera muy sencilla, vamos a las propiedades de nuestros Viewport 3D, y buscamos la propiedad ClipToBounds, con lo cual las imágenes dejarán de estar “clipeadas” y se mostrarán completamente:

3d6

Bien, por hoy lo dejaremos hasta aquí, próximamente nos meteremos con las líneas de tiempo para animar nuestros objetos, aquí les dejo el archivo hasta donde vamos hoy, por si quieren comparar con el suyo, salu2.

Héctor Pérez

2 comentarios sobre “Introducción a WPF, y creación de una aplicación WPF 3-D, parte 5 de N

  1. Hola?, estaba siguiendo tu cursito este de aqui, es realmente bueno, he aprendido mucho, pero no lo has continuado desde hace mucho tiempo, vas a continuar? o me busco la vida por ahi?, aun no se meter codigo en lo que acabo de hacer en este paso, muchas gracias, un excelente trabajo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s