Plan en tiempo real: Sitios 3D con Gemini
Olvídate de los generadores de prompts. Aquí tienes un plan interactivo completo, paso a paso. Desde un chat en blanco hasta una experiencia 3D interactiva, solo usando una conversación con inteligencia artificial en tiempo real.
Paso 1: Preparar el entorno
No necesitas instalar nada en tu computadora. Todo el proceso se ejecutará directamente en el navegador. Para iterar lo más rápido posible, abre dos pestañas una al lado de la otra:
- Abre el Google Gemini gratuito (gemini.google.com).
- Abre un editor de código en línea como CodePen.io o PlayCode.io. Aquí vamos a probar de inmediato el código generado sin tener que crear ni guardar archivos HTML.
Paso 2: Master Prompt inicial
El primer prompt es el más importante. Define los límites para Gemini y establece la base tecnológica (Three.js desde CDN, todo en un solo archivo). Copia este texto y pégalo en Gemini:
Eres un experto en WebGL y en la librería Three.js. Tu tarea es escribir el código HTML completo (incluyendo CSS y JS dentro) para una escena 3D funcional. Requisitos: 1. Crea en el centro un objeto 3D rotando (TorusKnot o Icosahedron). 2. Importa Three.js y OrbitControls por un enlace CDN (unpkg o cdnjs) en la etiqueta script. 3. Debe ser de “archivo único” (Single file): todo en un solo bloque de código, sin import maps. 4. No uses modelos externos (GLTF) ni texturas (JPG/PNG). Crea todo de forma procedimental en el código (MeshStandardMaterial, luces, colores). 5. Agrega luces puntuales (PointLight) y sombras suaves. 6. Configura el fondo con un color muy oscuro.
Paso 3: Ejecución y verificación
Cuando Gemini genere el código, cópialo desde la esquina superior derecha del recuadro de código. Ve a la segunda pestaña (por ejemplo, CodePen) y pega todo el código SOLO en el campo de HTML (deja vacíos los campos de CSS y JS, nuestro código ya tiene todo incluido).
Tip: Verás de inmediato el objeto 3D girando. Intenta hacer clic sobre él con el mouse y arrastrar: gracias a OrbitControls vas a poder rotarlo.
Paso 4: Iteración en tiempo real
Ahora empieza el trabajo real en tiempo real. Regresa a Gemini. No hace falta escribir un código nuevo ni enviarle el anterior (lo recuerda). Solo chatea con él y ve agregando requisitos paso a paso. Prueba enviarle estos mensajes, uno por uno:
Esto está buenísimo. Ahora cambia el material del objeto de color sólido a un ‘Wireframe’ (modelo de malla) brillante en color azul neón y rosa.
Perfecto. Ahora agrega en el fondo de la escena un sistema de partículas que rote lentamente (Points y PointsMaterial), que simule estrellas en el espacio.
Excelente. Y ahora haz que, cuando mueva el mouse, los colores de las luces empiecen a cambiar suavemente según la posición del cursor en la pantalla.
Paso 5: Solución de problemas (Debugging)
Cuando editas el código en tiempo real, a veces la IA se equivoca y en CodePen verás solo una pantalla negra o blanca. No necesitas saber programar, basta con que describas el problema en el chat:
El último código que enviaste no funciona. La pantalla está completamente negra y nada está girando. Revisa si cargaste correctamente OrbitControls y si la cámara no está dentro del objeto. Intenta arreglarlo y mándame la versión completa corregida.
¡Listo! Guardar el proyecto
Cuando estés 100% conforme con el resultado, copia el último código funcional desde CodePen. En Windows abre el Bloc de notas (Notepad) o en Mac TextEdit, pega el código y guarda el archivo como ‘mi_web_3D.html’. ¡Listo! Tienes tu propia aplicación 3D.