Acceso a la aplicación bloqueado
Para obtener acceso a este tutorial 3D primero debes suscribirte a nuestro canal de YouTube.
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 vacío hasta una experiencia 3D interactiva, solo usando conversación con una 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 el editor de código online CodePen.io o PlayCode.io. Aquí vamos a probar de inmediato el código generado, sin necesidad de crear ni guardar archivos HTML.
Paso 2: Master‑Prompt de inicio
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 un código HTML completo (incluyendo CSS y JS dentro) para una escena 3D funcional. Requisitos: 1. Crea en el centro un objeto 3D rotatorio (TorusKnot o Icosahedron). 2. Importa Three.js y OrbitControls mediante un enlace CDN (unpkg o cdnjs) en una etiqueta script. 3. Debe ser un “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 parte superior derecha del recuadro de código. Ve a la segunda pestaña (p. ej. 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 incluye todo).
Consejo: Verás de inmediato el objeto 3D girando. Intenta hacer clic sobre él con el mouse y arrastrar: gracias a OrbitControls podrás 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). Simplemente chatea con él y ve agregando requisitos poco a poco. Prueba enviarle estos mensajes, uno por uno:
Esto está muy bien. Ahora cambia el material del objeto de un color sólido a un modelo de alambre (“Wireframe”) luminoso en colores neón azul y rosa.
Excelente. Ahora agrega en el fondo de la escena un sistema de partículas que gire lentamente (Points y PointsMaterial) para simular estrellas en el espacio.
Perfecto. Y ahora haz que, cuando mueva el mouse, los colores de las luces comiencen a cambiar suavemente según la posición del cursor en la pantalla.
Paso 5: Solución de problemas (Debugging)
Cuando modificas el código en tiempo real, a veces la IA comete un error y en CodePen solo verás 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 gira. Verifica si cargaste correctamente OrbitControls y si la cámara no está dentro del objeto. Intenta corregirlo y mándame la versión completa ya arreglada.
¡Listo! Guardar el proyecto
Cuando estés 100 % satisfecho 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.