Introducción a hauzd - Parte 3
Para ver el video con subtítulos en español , actívalos en youtube.
Introducción a Hauzd - Parte 3
¡Bienvenido a la tercera parte de nuestra curva de aprendizaje! ¿Te perdiste el segundo? INGRESA ACÁ.
¡En este tutorial aprenderemos cómo ensamblar nuestras escenas y usar hauzd Engine para crear su presentación en 3D!.
Si aún no ha descargado hauzd Editor, puede ir a la página de administración y encontrar el botón download en el landing page, o simplemente usar ESTE ENLACE DIRECTO, el proceso de instalación será fácil y rápido. Una vez hecho esto, puede abrirlo y comenzar a trabajar de inmediato.
Lo primero que deberá hacer es iniciar sesión con su cuenta hauzd, el engine cargará automáticamente todos los proyectos creados en admin y podrá abrir el proyecto en el que desea trabajar.
Cuando inicia un nuevo proyecto, puede configurar su carpeta Local(Local Folder), esto ayudará al enginea buscar sus archivos en el directorio que creó para ellos, pero también puede guardarlos en una sola carpeta y usar drag and drop para importar sus assets.
Puedes tener todos los archivos en una sola carpeta y aún así, poder importar con un solo click o drag and drop, pero para mejor organización, recomendamos usar la siguiente estructura:
Architecture, aquí es donde se almacenarán sus escenas .fbx y las imágenes de la galería, también puede crear una carpeta MAX dentro de ella para que el script hauzd pueda crear automáticamente el .fbx en la carpeta correcta.
Surroundings Es donde configurará sus archivos fbx relacionados con la ubicación.
User Interface , esta carpeta tendrá sus recursos de interfaz de usuario, archivos .ai y cada tamaño para ella, el script hauzdUI será útil para exportar sus recursos de Illustrator a la carpeta correcta.
Application aquí es donde almacenará los logotipos web de su aplicación.
Para comenzar a construir su aplicación, debe crear su primer Scene Blueprint, esta data contendrá información de la escena, como la configuración de la cámara, la oclusión ambiental y las configuraciones de luz, establezca su nombre y tipo de blueprint, y está listo para comenzar, tenga en cuenta que no puede usar un número para el primer carácter de ningún nombre.
Los grupos Sun y Lights administrarán algunas configuraciones interesantes para su proyecto, puede usar hasta 3 grupos de luces en su escena y le recomendamos que use solo 3 soles individuales.
Después de su primer BAKE, puede cambiar en tiempo real la contribución de ciertas luces, como la luz directa, indirecta y ambiental, ¡Sin necesidad de volver a realizar el bake!.
Puede crear cualquier cantidad de Scene Blueprints con cualquier configuración diferente si lo necesita para su proyecto.
Haga clic en OK y se aplicarán los cambios.
Ahora debe crear su escena (Scene), debe tener el mismo nombre de su escena fbx y asignarse a su Scene Blueprint creado recientemente, después de este paso, puede comenzar a importar sus escenas con un solo clic.
Puede ver sus escenas y hacer bake de las luces usando este módulo.
Para este tutorial agregaremos una escena de edificio, un keyplan y 2 unidades usando los assets de Sample Project.
Podemos repetir el proceso para cada uno, asegurándonos de que estamos usando el blueprint correcto para el tipo correcto decada escena y el nombre correcto que coincida con la escena fbx.
Llamamos a un "NODO" (NODE) todo elemento arquitectónico que será parte del flujo de su aplicación, similar a lo que ya hicimos en escenas, necesitamos Blueprint para definir la configuración y la jerarquía para definir la Estructura.
Node blueprints especifica cosas como qué galería, lista, especificación, etc. utilizar. También podemos agregar varias propiedades que queremos controlar desde el administrador. Por ejemplo, es probable que desee agregar propiedades de "beds"(habitaciones) y "baths"(baños) al blueprint del apartamento, esta configuración solo debe definirse una vez en la pestaña "Advanced" del administrador.
Después de guardar la configuración del editor (File→Save), los datos se actualizarán en el administrador en la pestaña "Advanced", puede modificar allí los valores de las propiedades que establezca, ¡Todos los cambios se aplicarán en tiempo real!.
en Node Hierarchy es donde estableceremos el orden de nuestras escenas, necesitamos agregar un parent (raíz), que en este caso, será la escena del edificio y comenzar a agregar los Child Nodes (Todos los nodos que serán dependientes de dicho edificio).
En las Escenas de Keyplan será donde se configurará el pairing,y definirá que tus elementos part_ y partColl_ serán anclados a un nodo en específico. Este sub nodo será tu unidad, apartmanento, casa u oficina. VER ARTÍCULO "TODO SOBRE KEYPLAN PAIRING".
En el Apartamento EN LA JERARQUÍA (HIERARCHY), contendrá propiedades individuales y únicas para esta unidad, como la disponibilidad, el precio y el nombre.
Luego de esto, Puedes importar los logos y Standard UI con un solo click y empezar a probar tu app.
Ahora, necesitamos agregar galerías de imágenes, primero, agregaremos nuestras imágenes a la carpeta de arquitectura(architecture), y similar a como lo hicimos con las escenas, crearemos (add) las imágenes en el engine para que podamos importarlas con un solo click. Necesitamos usar el mismo nombre en el engine, en el archivo, y en la convención de nombres dentro de 3ds max.
Luego, crearemos el grupo para la imágen, puedes usar cualquier categoría para agrupar diferentes imágenes dentro de la sección de galería.
Para finalizar, crearemos la galería para usar en nuestra aplicación y la asignaremos en la sección Node Blueprint, si tenemos nuestros elementos de galería en nuestras escenas 3D, deberían aparecer al ejecutar la aplicación.
Creando Grupos de Galería
Creando Galerías
Asignando Galerías a los Node Blueprint
Usaremos el mismo método para agregar una segunda imagen para nuestra escena, puede importar y usar cualquier cantidad de imágenes estáticas que desee, organizarlas por grupo y crear las galerías que desee para sus escenas.
"Thumbnail Gallery" es la galería que aparecerá como pequeñas imágenes flotantes en las escenas 3D, y "Gallery" será la interfaz completa de galería.
Crearemos nuestra especificación para nuestro proyecto, esto se utilizará en la pantalla de descripción, y podemos establecer el texto en el panel de administración, también podemos usar diferentes especificaciones para cada escena y podemos asignar las secciones a los pisos y al exterior.
Esta información se personaliza mediante la pestaña "ADVANCED". No te olvides de guardar (SAVE CHANGES).
Necesitamos configurar colorMods (Ver artículo "Todo sobre ColorMods") para definir colores de resaltado en los elementos part_ , podemos crear tantos como queramos para diferentes partes del flujo y asignar diferentes condiciones como Estado, Categoría, Feature y más.
Crearemos colorMods para "Select" y "Filter Pass", ambos utilizando las condiciones de Status (Available, Sold, Reserved) y categoría (Apartments).
Podemos usar y personalizar tanto como queramos nuestras 3 Categorías de part_ (part_ part2_ y part3_). No olvides asignarlo a tu escena deseada en node Blueprint.
Luego, necesitaremos crear los filtros correspondientes para mostrar esta opción, debemos abrir el menú desplegable de filtro y agregar un nuevo filtro llamado Availability, ya que no usaremos un slider, podemos dejar este campo en blanco. Después de asignarlo node Blueprint, podemos ver los botones en la aplicación y activar el filtro.
Después de establecer nuestras propiedades para las unidades y definir esos valores en la pestaña de "Advanced", podemos crear un filtro para cada propiedad, también puede personalizar sus botones e íconos en los archivos de interfaz.
Puede revisar también el artículo "Todo sobre Filtro".
También estableceremos un filtro utilizando una propiedad de slider, "Área en metros cuadrados(Area in Square Meter)". De esta manera, podemos filtrar diferentes valores de metraje usando los sliders.
Ahora podemos crear nuestra lista para mostrar y organizar nuestras unidades.
Lo crearemos utilizando nuestro menú desplegable "Lists", primero crearemos la dirección de raíz (Root Address) para que el motor pueda saber cuántos pasos buscar unidades en nuestra jerarquía, en nuestro caso, nuestro nodo raíz (Root address) es el edificio Tower, y dejaremos el número predeterminado 8 en la profundidad de búsqueda.
Es importante agregar la condición de category (Category=Apartment,House,Office), así evitará tener elementos en la lista que realmente no desea (Edificios, Amenidades, Garages...).
Ahora podemos comenzar a agregar columnas, tenemos muchas propiedades para mostrar, pero en este momento solo agregaremos algunas props básicas, agregaremos nombre(label), piso(floorIdx), área(areasqm), estado(status) y habitaciones(beds). Después de terminar nuestra lista, necesitaremos asignarla en nuestro node Blueprint de la escena deseada y probar nuestra aplicación.
Ahora, necesitamos agregar el mapa a nuestra escena, podemos usar las coordenadas y el acimut de los settings de architecture o usar una coordenada específica. Elija la extensión(Extend) del mapa descargado de Open Street Map, estas unidades están en metros. También tenemos oclusión ambiental y configuraciones para nuestros soles en esta ventana.
Después de esto, necesitamos importar nuestro .fbx, debe tener el mismo nombre que en el editor y contener nuestros soles y splines.
Estas splines se pueden nombrar:
• mapCloseBuild_ este spline hará que los edificios más cercanos desaparezcan mientras giramos la cámara.
• mapNoTree_ Esta Spline evitará la generación de árboles en el espacio que cubre la forma de el spline.
• mapNoBuild_ Esta Spline evitará Generar edificios de OSM en el espacio que cubre la forma.
• mapCutOut_ Esta spline marcará el área para evitar cualquier generación de OSM (Terreno, calles y edificios).
Después de que se importa nuestro .fbx y se descarga el mapa, podemos hacer bake y necesitaremos asignarlo a la escena exterior donde queremos mostrar los alrededores, probablemente necesitemos ajustar la rotación y la ubicación y podemos hacerlo en nuestra sección de coordenadas e importando nuevamente nuestra escena para actualizarla.
Cuando terminemos el proyecto completo, podemos hacer clic en GUARDAR y PAQUETE en nuestro menú Archivo, el paquete activará un proceso de compresión en nuestro proyecto ya guardado. La primera vez puede necesitar un par de horas para activar completamente el proyecto en el enlace.
¡Con todo lo guardado y el package ya procesado, podemos compartir el enlace de su proyecto en cualquier momento para ser visto en cualquier lugar!.
Related Articles
Introducción a hauzd Engine - Parte 1
¡Hauzd es la forma más fácil de crear presentaciones 3D interactivas de bienes raíces y me alegra poder mostrales el proceso de producción para que pueda comenzar a crear sus proyectos más rápido y más fácil que nunca!. Si aún no tiene Hauzd Engine, ...Introducción a hauzd - Parte 4
Para ver el video con subtítulos en español, actívalos en youtube Introducción a Hauzd - Parte 4 En este video, aprenderemos cómo modificar y usar nuestra plantilla de interfaz para crear un look and feel único para su cliente. Sus clientes siempre ...Introducción a hauzd - Parte 2
INFORMACIÓN MUY IMPORTANTE Si estás usando la versión del editor 1.06.130 o más reciente, puedes importar tu escenas mucho más rápido: • NO necesitas usar los prefixes geom_ o obj_ • NO necesitias hacer UV unwrap del canal 2 en cada elemento ...Recomendaciones de Calidad para hacer una excelente App Interactiva
Con la última actualización de hauzd, crear una app interactiva es más fácil y rápido que nunca, puedes construir esta app utilizando los renders e imágenes estáticas que ya creaste para tu cliente o incluso usar fotos reales del proyecto. Solo ...Creando una aplicación interactiva 2D con hauzd
En este tutorial vamos a aprender paso a paso cómo crear una aplicación interactiva 2D con hauzd. Recomendamos ver todos los videos en orden uno a uno y activar los subtítulos en español. Antes de Empezar ...