Cómo crear un portafolio 3D interactivo estilo videojuego con agentes de IA

Para este pipeline, se utiliza la plataforma basada en agentes Verdent. Aunque está disponible para VS Code y JetBrains, se recomienda la aplicación de escritorio por su interfaz simplificada, lo que la hace accesible para quienes se enfocan en la arquitectura general en lugar de la sintaxis de bajo nivel.

El motor principal de este flujo de trabajo es Claude 4.5 Opus. Este modelo es especialmente eficaz para aplicaciones web 3D debido a su alta capacidad de razonamiento y su eficiencia al generar estructuras de código complejas.

• Conexión con GitHub: vincula tu cuenta de GitHub a Verdent para permitir que el agente gestione el control de versiones y la creación de ramas automáticamente.
• Gestión de espacios de trabajo: una de las funciones más potentes de esta configuración es la capacidad de ejecutar múltiples espacios de trabajo en paralelo. Esto te permite desarrollar herramientas auxiliares (como optimizadores de assets) en una rama mientras creas el portafolio principal en otra, evitando los conflictos de código habituales en los editores de código con IA convencionales.

Abre un nuevo espacio de trabajo y pídele al agente mediante un prompt que cree una aplicación web local en Next.js que utilice la biblioteca glTF-transform. El objetivo es una interfaz sencilla de «arrastrar y soltar» que automatice lo siguiente:

• Conversión de texturas al formato WebP.
• Optimización de la malla para reducir la cantidad de vértices.
• Redimensionamiento de texturas a una resolución máxima de 1k o 2k.

Ejecuta el agente y deja que construya la estructura de archivos. Una vez que termine, puedes iniciar el servidor local y soltar un modelo GLB pesado en la interfaz.

Práctica recomendada: usa texturas de 2k o 4k cuando necesites alta fidelidad, pero asegúrate de que el optimizador las comprima para la versión web final, de modo que el sitio siga funcionando con fluidez en celulares.

En lugar de lanzarte directo al código, cambia el agente a Plan Mode. Esto obliga al agente a analizar los requisitos, verificar su propia lógica y presentar una hoja de ruta.

• Revisión del diagrama: el agente generará un diagrama técnico de la arquitectura del sitio.
• Reducción de la complejidad: los agentes de IA suelen sugerir diseños de varias páginas por defecto. Para mantener una sensación moderna de «estilo videojuego», indícale al agente que consolide la experiencia en una sola pantalla de entrada de alto impacto y un visor principal.

Comunica tu visión utilizando una combinación de texto e imágenes de referencia. Una estructura de prompt muy efectiva para este portafolio incluye:

• Pantalla de entrada: una página de inicio con una miniatura y un botón «Enter Portfolio».
• Diseño del visor de personajes: una estructura de pantalla dividida donde el personaje 3D ocupa el 60% del lado izquierdo y una tarjeta de información ocupa el lado derecho.
• Navegación: botones para alternar entre personajes (Left/Right) y un sistema que ajusta automáticamente el personaje a la altura de la pantalla.
• Estilo visual: un fondo negro puro, un suelo de cuadrícula infinita que se desvanece en la distancia y partículas flotantes tipo «sparkle» o «star dot» para dar profundidad.

Cuando el agente te lo pida, especifica las siguientes configuraciones:

• Estilo de cuadrícula: elige una cuadrícula infinita que se desvanezca hasta quedar negra. Para mantener la coherencia de marca, más adelante puedes pedir que se cambie el color de la cuadrícula (por ejemplo, a naranja).
• Estilo de partículas: selecciona «floating sparkles» para crear una sutil sensación de movimiento en el fondo.
• Interacción del usuario: desactiva la rotación automática. El personaje solo debe rotar según la interacción del usuario para brindar una sensación más táctil, como de «menú de juego».

Asegúrate de que los modelos de tus personajes (GLB) incluyan animaciones de correr o de reposo. Debes indicarle al agente que active estas animaciones automáticamente al cargarse el personaje.

Ve a la carpeta de tu proyecto en el explorador de archivos y coloca tus assets de la siguiente manera:

• Modelos: Coloca los archivos .glb optimizados en el directorio public/models.
• Imágenes de la UI: Coloca las miniaturas o fotos de perfil en la carpeta public/images.

Proporciónale al agente una lista de datos de tus personajes que incluya nombres y descripciones, herramientas utilizadas para crearlos y enlaces a archivos fuente o contenido de video externo. El agente no solo completará las estructuras de datos, sino que también corregirá automáticamente las rutas de los archivos. Por ejemplo, si proporcionas un .jpg pero el código esperaba un .png, el agente detectará el archivo en tu carpeta y actualizará el código en consecuencia sin intervención manual.

Carga el proyecto en tu navegador. Si el modelo 3D se ve demasiado pequeño o la tarjeta de información está desalineada, toma una captura de pantalla de la ventana del navegador.

El prompt de la captura de pantalla: Vuelve a subir la captura de pantalla al agente y dale críticas específicas. Por ejemplo: "La tarjeta de la derecha está actualmente sobre un fondo negro; muévela para que se superponga al 3D viewer. Además, haz que el modelo se ajuste a toda la altura de la pantalla y haz zoom de forma normal".

Para alejarte de una apariencia genérica, aplica branding personalizado:

• Branding: Pídele un tema de "estilo naranja" que coincida con los colores específicos de la marca.
• Mejoras de componentes: En lugar de enlaces de texto simples para videos externos, pídele al agente que cree "tarjetas con miniaturas de YouTube" que ofrezcan una vista previa visual del contenido.