En este codelab, aprenderás a crear una galería virtual inspirada en el Vivero Virtual utilizando Frame VR. A lo largo de este ejercicio, importarás elementos como imágenes 2D, objetos 3D, texturas y un skybox (imagen 360°). El resultado final será un escenario interactivo en el que los usuarios podrán explorar tu galería. Aunque trabajaremos con varios elementos, deberás seleccionar al menos uno de ellos para personalizar, pero puedes experimentar con todos si lo deseas.

Para realizar proyectos en Frame VR, utilizaremos el entorno de creación en línea de la plataforma, accesible desde cualquier navegador web. Frame VR permite crear espacios inmersivos directamente desde la web, donde puedes subir y manipular objetos en tiempo real, añadiendo elementos interactivos para enriquecer la experiencia de los usuarios.

  1. Accederemos al siguiente link: https://learn.framevr.io/#sign-up
  2. Como ya hemos creado anteriormente nuestra cuenta se nos habilitará la opción de crear un ambiente. Se verá una imágen como la siguiente donde podremos escoger multiples opciones de plantillas para empezar. En este caso escogeremos la plantilla "Empty".

  1. Al final para confirmar daremos click en "Go There"

  1. Una vez seleccionada la plantilla, nombra el proyecto como "Galería Vivero Virtual" y guarda los cambios.
  2. Nuestro metaverso cargará y se verpa así, en esta plataforma podremos explorar al mismo tiempo que editamos, por lo que en nuestra pantalla de inicio se verá las opciones de cámara y microfono los cuales podremos activar o desactivar segun

La temática de nuestro metaverso será una galería inspirada en el Vivero Virtual. Para construir esta galería, estableceremos una estructura principal que funcione como el marco de exhibición de los elementos visuales. Esta estructura inicial será el espacio base de la galería, en el cual podremos agregar otros modelos 3D, incorporar imágenes y texturas relevantes, y realizar modificaciones para personalizar el espacio según la temática.

  1. Para esto descargaremos el modelo base desde este link: https://drive.google.com/file/d/1aJJk36UxmWTBhPNmpMRVG95NrFI2pRAh/view?usp=sharing

Al ingresar al link se nos abrirá una página desde la cual podremos descargar nuestro modelo base. Para esto daremos click en el botón que dice Descargar:

  1. Una vez hayamos descargado nuestro modelo base procederemos a importarlo en nuestro proyecto. Para esto nos dirigiremos a la barra inferior, en esta hay múltiples opciones, una de ellas llamada "Creation Menú" Daremos click en esa.

Al hacer clic, se abrirá un menú desde el cual podremos agregar diversos tipos de contenido, como imágenes, videos y modelos 3D. En este caso, vamos a importar nuestro modelo 3D base. Para ello, dirígete al apartado "Add Your Own", donde podrás cargar contenido personalizado, incluidos modelos 3D. Selecciona la opción "3D MODEL" para iniciar el proceso de importación de tu modelo en Frame VR.

  1. En el costado derecho de nuestra ventana se nos abrirá un Menú llamado "Add 3D Model". Acá daremos click sobre el texto que dice Upload.glb file:

  1. Se nos abrirá una ventana de Explorador de Archivos. Aquí buscaremos y seleccionaremos el modelo base que descargamos. Seguido de esto daremos click en "Abrir".

  1. Listo, se nos mostrarán diferentes opciones antes de importar el modelo. Revisaremos que todas estén marcadas como se muestra a continuación y luego daremos click en este botón:

Nos saldrá una barra de carga y tendremos que esperar a que el modelo termine de importarse:

  1. Listo, al terminar de cargar el modelo veremos que sale en la parte inferior de la librería desde donde ahora podremos agregar la cantidad que queramos de este modelo solo dando click en el +.

  1. Por defecto nuestro modelo se agregar a nuestra escena en una escala pequeña, es por esto que debemos agrandarlo.

Para hacer esto primero activaremos el modo Edición en nuestra escena. Para hacer esto nos dirigiremos a la barra inferior y seleccionaremos la opción que tiene el símbolo de un lápiz.

  1. Ahora daremos click sobre el modelo. Veremos que se abrirá una venta de propiedades y edición de nuestro modelo en la parte izquierda de la pantalla. Allí buscaremos la opción que se llama Position/ Rotation/ Scale y extenderemos para ver todas sus opciones (Para expandirlo daremos click en el triangulo que apunta hacia abajo)

  1. Al expandir este menú de opciones, podrás editar aspectos como la posición y tamaño de tu modelo. En este caso, dirígete al apartado "Scale" y ajusta los valores en X, Y, y Z a 20 en cada uno. Esto permitirá escalar el modelo a un tamaño adecuado para la visualización en el entorno de Frame VR.

  1. Ahora desactivaremos las colisiones de nuestro modelo. Esto evitará que nuestro modelo desaparezca o se altere al momento de ser tocado por nuestro avatar. Para hacer esto desactivaremos la opción con el nombre "Occlussion Culling"

  1. Por último, ajustaremos la posición del modelo para que la altura de su base coincida con el nivel del suelo en el entorno. Para ello, selecciona el modelo y utiliza las flechas de movimiento que aparecen sobre él. En este caso, arrastra la flecha verde para mover el modelo en el eje Y y ajustar su altura, asegurándote de que quede alineado con el piso.

Podemos agregar modelos 3D individuales en nuestra escena. Para esto tenemos múltiples opciones dependiendo del origen del modelo.

En primer lugar podemos hacer uso de los modelos que por defecto trae la librería de FrameVR. Para acceder a estos seguiremos los siguientes pasos.

  1. En la barra de herramientas inferior daremos click al botón de "Creation Menu"

  1. Al hacer esto se nos abrirá el siguiente menú donde escogeremos la opción "3D MODEL"

  1. En la parte derecha de nuestra pantalla aparecerá una ventana con opciones de importación de modelos 3D. En este caso veremos que en la parte inferior de esta ventana habrá una sección con el nombre de "Choose Model From". Aquí habrá múltiples opciones de donde podemos importar nuestros modelos 3D, por defecto viene seleccionada la opción "Library". Para poder ver todos los modelos ahí disponibles solo faltaría arrastrar la ventana hacia arriba con el mouse.

  1. Seleccionaremos el primer modelo el cual es una silla. Al dar click en este se importara en nuestra escena.

Listo, ya tendremos un modelo de la biblioteca en nuestra escena.

Otra opción para importar modelos en Frame VR es a través de Inteligencia Artificial. Frame VR permite generar una variedad de modelos 3D utilizando prompts e inteligencia artificial generativa, lo que facilita la creación de objetos personalizados sin necesidad de diseñarlos manualmente. Esta herramienta es ideal para quienes desean explorar opciones creativas o añadir detalles únicos a sus entornos de manera rápida.

Para hacer esto seguiremos los siguientes pasos

  1. Desde la misma ventana donde agregamos nuestra silla veremos que en la parte superior tendremos una opción AI Model Generator. Aquí tendremos un espacio para llenar con texto, es decir un prompt que describa el modelo que queremos crear.

Escribiremos la descripción de nuestro modelo. Tendremos mejores resultados si lo escribimos en inglés. En este caso generaremos nosotros " A plant wearing a vr headset"

Una vez escrito el prompt, daremos click en "Create Model"

  1. Nos saldrá este mensaje indicando que el modelo se está generando. Debemos esperar a que termine de cargar.

  1. Cuando termine de cargar nos saldrá la siguiente ventana. Daremos click en "Add to Frame"

  1. Dependiendo de la congestión en el uso de este servicio podrá demorarse más o menos la generación de nuestro modelo.

Y listo, ya tendrás tu modelo con IA Generativa añadido

Para exponer contenido visual, agregaremos imágenes relacionadas con el Vivero Virtual.

En esta plataforma tendremos la opción tanto de agregar imágenes propias, como de generar unas con IA, lo cual puede ser bastante útil en algunos casos.

  1. Para esto nos dirigiremos a la barra inferior, nuevamente a la opción "Creation Menú" Daremos click en esa.

En este caso, vamos a importar nuestra imagen. Para ello, dirígete al apartado "Add Your Own", donde podrás cargar contenido personalizado, incluidos imagenes 2D. Selecciona la opción "IMAGE"

  1. Se nos abrirá una ventana como la siguiente donde tendremos 3 opciones: Agregar una imágen del computador, tomar una foto, o agregar una foto de internet. En este caso vamos a escoger una imágen de nuestros archivos. Para hacer lo anterior Daremos click en el botón "Browse"

  1. Escogeremos alguna imágen que tengamos guardada en nuestro computador y daremos click en "Abrir"

  1. Listo, ya tenemos nuestra foto importada en nuestro Metaverso. Con las herramientas aprendidas anteriormente podremos modificar el tamaño y la posición de esta. En este caso la acomodaremos para que quede en una de las paredes de nuestro modelo.

Lo último que aprenderemos será cómo agregar una imagen 360° como skybox en nuestro metaverso. Un skybox es una textura o imagen que se coloca alrededor de todo el entorno virtual para crear la ilusión de un horizonte.

  1. El primer paso será importar una imágen 360 que podamos usar como SkyBox en nuestra escena. Para eso descargaremos la siguiente imágen, tal y como previamente descargamos nuestro modelo: https://drive.google.com/file/d/12_MNRVl_sBhYAzX8agUY64pPtiTfZsuZ/view?usp=sharing

  1. Una vez ya tengamos nuestra imágen 360 descargada procederemos a importarla en Frame VR. Para hacer esto nuevamente nos dirigiremos al "Creation Menu" pero esta vez escogeremos la opción "360 CONTENT" y luego "360 PHOTO"

  1. Una vez aquí al igual que con la imágen 2D podremos escoger el origen de nuestra imágen. Nuevamente escogeremos la opción "My Files" y seguidamente abriremos nuestra imagen 360 en nuestro explorador de archivos.

  1. Esperaremos a que termine de cargar nuestra imágen. Al terminar de cargar aparecerá una esfera delante de nosotros con nuestra imágen 360.

Daremos click sobre esta esfera y nuestra imágen 360 se convertirá en nuestro nuevo SkyBox. Esto podrá tomar algunos segundos.

Nota: Debemos percatarnos que al momento de dar click no estemos en modo de edición:

Has completado el codelab para crear una Galería del Vivero Virtual en Frame VR. A lo largo de este tutorial, configuraste un espacio en Frame VR, importaste y ajustaste modelos 3D, añadiste imágenes 2D y aplicaste un skybox 360° para crear un ambiente inmersivo y único. Estos conocimientos te brindan una base sólida para personalizar aún más tus espacios en el metaverso.