De un archivo de texto a un mundo 3D
Hoy vas a crear una página, darle estilo, hacer que responda y usar inteligencia artificial para construir una figura en tres dimensiones.
Tu resultado: una figura que puedes transformar.
Al terminar tendrás un archivo HTML propio que se abre en el navegador. No necesitas saber programar para empezar.
Prepara tu espacio
- En computador: navegador, Bloc de notas y una carpeta llamada Taller_3D.
- Para pedir código: ChatGPT o Claude, con tu sesión iniciada. Usaremos sus respuestas de texto.
- Necesitas internet para conversar con la IA y cargar Three.js.
- En parejas o tríos: alternen quién usa el teclado en cada paso.
Tu ritmo
Los pasos suman aproximadamente una hora. Después habrá 30 minutos para práctica libre, ayuda y conversación. Puedes volver a cualquier paso desde el menú.
Una pantalla plana puede mostrar profundidad
Un objeto tiene ancho, alto y profundidad. Una pantalla es plana, pero puede mostrar pistas que nos hacen percibir volumen.
Experimento: dos ojos, dos puntos de vista
- Extiende un brazo y levanta el pulgar frente a un objeto lejano.
- Sin mover la cabeza ni el pulgar, cierra un ojo.
- Abre ese ojo y cierra el otro. Repite lentamente.
Actividad en vivo: toca la goma del lápiz
- Sostén un lápiz frente a ti, con la goma hacia arriba.
- Cierra un ojo e intenta tocar la goma con el dedo índice de la otra mano.
- Repite con los dos ojos abiertos y compara cómo te resulta.
Observa: ¿acertaste al primer intento? ¿Notaste alguna diferencia entre hacerlo con un ojo cerrado y con ambos abiertos?
Para percibir profundidad se usan pistas como el tamaño aparente, la perspectiva, las sombras y lo que tapa un objeto.
Izquierda y derecha.
Arriba y abajo.
Delante y detrás.
¿Y el 3D del navegador?
Construimos una escena con posiciones en tres dimensiones y una cámara virtual. El programa calcula cómo se vería desde esa cámara y dibuja una imagen plana. No hacen falta gafas 3D: veremos volumen gracias a la perspectiva, la luz y el movimiento.
Escribe texto. Abre una página.
Primero veremos algo sorprendente: el navegador puede mostrar un archivo que tú acabas de escribir.
Primera prueba: solo dos palabras
- Abre el Bloc de notas. Escribe Hola, mundo.
- Selecciona Archivo → Guardar como.
- En nombre escribe hola.html. En tipo selecciona Todos los archivos y en codificación UTF-8.
- Guárdalo en tu carpeta Taller_3D.
- Busca el archivo y ábrelo con doble clic. Si no abre el navegador, usa Abrir con → Chrome, Edge o Firefox.
HTML organiza el contenido
HTML significa HyperText Markup Language: lenguaje de marcado de hipertexto. Las etiquetas indican qué es cada elemento: <h1> es un título principal y <p> es un párrafo.
Vuelve al Bloc de notas y reemplaza todo por este ejemplo. Guarda con Ctrl + S y actualiza el navegador con Ctrl + R o su botón de recargar.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi primera página</title>
</head>
<body>
<h1 id="titulo">Hola, mundo</h1>
<p>Estoy aprendiendo en el Club de Inteligencia Artificial.</p>
</body>
</html>Lo que verás: un título grande y un párrafo debajo. Tu cambio: reemplaza “mundo” por tu nombre, guarda y actualiza.
¿Se abre el Bloc de notas o no cambia nada?
Comprueba que el nombre no sea hola.html.txt. Guarda otra vez eligiendo “Todos los archivos”. Para editar un HTML usa “Abrir con → Bloc de notas”. Guarda antes de actualizar y revisa que estés abriendo el mismo archivo que editaste.
El mismo contenido, otra apariencia
CSS cambia cómo se ve la página: colores, letras, tamaños y espacios.
CSS significa Cascading Style Sheets: hojas de estilo en cascada. El navegador ya trae estilos por defecto; ahora pondremos los nuestros.
- En el Bloc de notas, reemplaza el contenido de hola.html por este ejemplo completo.
- Guarda y actualiza la página en el navegador.
- Busca
#ffd166, cámbialo porpinky vuelve a guardar y actualizar.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi primera página</title>
<style>
body {
background: #14213d;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 40px 16px;
}
h1 { color: #ffd166; font-size: 42px; }
button { padding: 12px 20px; font-size: 18px; cursor: pointer; }
</style>
</head>
<body>
<h1 id="titulo">Hola, mundo</h1>
<p>Estoy aprendiendo en el Club de Inteligencia Artificial.</p>
</body>
</html>Color del fondo.
Color del texto.
Tipo de letra.
Lo que verás: fondo azul oscuro, texto blanco y título amarillo; después de tu cambio, el título será rosado. El texto sigue siendo el mismo.
Tu página responde a un clic
JavaScript es un lenguaje de programación. Aquí lo usaremos para dar una instrucción: cuando alguien toque el botón, cambia el título.
Reemplaza hola.html por el código completo, guarda y actualiza. Después pulsa el botón.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi primera página</title>
<style>
body {
background: #14213d;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 40px 16px;
}
h1 { color: #ffd166; font-size: 42px; }
button { padding: 12px 20px; font-size: 18px; cursor: pointer; }
</style>
</head>
<body>
<h1 id="titulo">Hola, mundo</h1>
<p>Estoy aprendiendo en el Club de Inteligencia Artificial.</p>
<button onclick="saludar()">Haz clic aquí</button>
<script>
function saludar() {
document.getElementById('titulo').textContent =
'¡Lo hice! Mi página responde';
}
</script>
</body>
</html>- HTML crea el botón.
onclick="saludar()"indica qué acción ejecutar al pulsarlo.- La función
saludar()busca el título y cambia su texto.
Tu cambio: escribe otro mensaje dentro de las comillas de “¡Lo hice! Mi página responde”. No borres las comillas.
El botón no responde
Vuelve a copiar el ejemplo completo, guarda y actualiza. Comprueba que saludar tenga el mismo nombre en el botón y en la función, y que conservaste comillas, paréntesis y llaves.
Una caja de herramientas para el 3D
Una biblioteca es código preparado por otras personas que puedes reutilizar. Three.js es una biblioteca de JavaScript para crear gráficos 3D en la web.
También escucharás “librería”. Aquí diremos biblioteca. Three.js es un proyecto de código abierto iniciado por Ricardo Cabello, conocido como mr.doob, y desarrollado con una comunidad de colaboradores.
El espacio donde colocas los objetos.
El punto de vista desde el que los miras.
La forma: cubo, esfera o pirámide.
Su apariencia: color y respuesta a la luz.
Ayuda a distinguir las superficies y el volumen.
Calcula y dibuja la imagen de la escena.
¿De dónde sale la biblioteca?
Su sitio oficial es threejs.org. En este taller el propio HTML la carga desde un servicio de distribución de archivos llamado CDN. No la instalarás manualmente.
const THREE = await import(
'https://cdn.jsdelivr.net/npm/three@0.179.1/+esm'
);Usaremos una versión fija para mantener los ejemplos consistentes. Esta línea necesita internet. Los ejemplos evitan modelos, imágenes y archivos locales adicionales para poder abrir el HTML directamente.
¿Quién hace los cálculos?
JavaScript dirige la escena. El navegador utiliza normalmente el procesador gráfico —GPU— de tu computador o celular para dibujarla a través de WebGL. La IA escribe el código; no tiene que generar cada imagen mientras miras el resultado.
Pide tu primera figura animada
Vamos a darle a la IA una petición precisa y comprobar el resultado. No tienes que memorizar ni escribir todo el código.
- Abre una conversación en ChatGPT o Claude.
- Copia y envía el siguiente prompt.
- Copia el código HTML de la respuesta. No copies los delimitadores de tres comillas invertidas ni el texto explicativo.
- Pégalo en un documento nuevo del Bloc de notas y guárdalo como mi-cubo.html, tipo “Todos los archivos”, UTF-8.
- Abre el archivo en el navegador con internet.
Crea una animación 3D de un cubo que gire lentamente usando Three.js. Es para un taller de principiantes.
Entrega el código completo de un único archivo HTML, con CSS y JavaScript incluidos. Lo guardaré como mi-cubo.html y lo abriré con doble clic en un navegador de computador con internet. No uses React, npm, instalación, servidor local ni archivos auxiliares.
Dentro de un script type="module", carga la biblioteca así:
const THREE = await import('https://cdn.jsdelivr.net/npm/three@0.179.1/+esm');
Incluye una escena, cámara en perspectiva, cubo, material, luces y WebGLRenderer. Usa setAnimationLoop y calcula el movimiento según el tiempo transcurrido. Ajusta la vista al tamaño de la ventana y limita la densidad de píxeles a 2. No uses texturas ni modelos externos. Incluye un mensaje visible si falla la carga.
Pon un título en español y un botón para pausar y reanudar el giro. El diseño debe funcionar también en celular. Devuelve el HTML completo en un solo bloque de código y después explica en tres frases qué hace. No necesito Canvas, Work ni una vista previa dentro del chat.Lo que deberías ver: un cubo con volumen que gira lentamente y un botón que permite detener y reanudar el giro.
La IA no funciona, alcanzaste un límite o el resultado falla
Puedes seguir con el ejemplo preparado: incluye figuras y controles para los próximos pasos. Ábrelo en el editor, copia su código al Bloc de notas o descárgalo.
Haz que tu figura sea tuya
Pedir un cambio, observarlo y explicar qué ocurrió también es aprender a crear con IA.
Primera modificación
En la misma conversación, envía este prompt. Puedes sustituir el color por uno que te guste.
Modifica el HTML anterior: cambia el cubo por una pirámide de base cuadrada, ponla de color naranja y reduce la velocidad de giro a la mitad. Conserva el botón de pausa y la forma de cargar Three.js. No agregues archivos ni otras bibliotecas. Devuelve el HTML completo para reemplazar el anterior.
Copia el HTML completo de la respuesta, reemplaza el contenido de tu archivo, guarda y actualiza. Comprueba las tres cosas: figura, color y velocidad.
Después, agrega controles
A partir del HTML anterior, agrega controles visibles en español para elegir cubo, esfera o pirámide de base cuadrada, cambiar el color y ajustar la velocidad. Conserva el botón para pausar y reanudar. Permite girar la figura arrastrando con ratón o dedo, incluso cuando esté pausada, usando eventos de puntero sin bibliotecas adicionales. No bloquees el desplazamiento de toda la página. Entrega un único HTML completo, con la misma importación de Three.js y sin instalaciones.
Un prompt útil describe cuatro cosas
Qué cambiar · qué debe pasar al usarlo · qué debe conservarse · cómo quieres recibir el resultado.
Pausa el giro. Cambia la forma.
Ahora comprobaremos que no estamos reproduciendo solamente una secuencia de imágenes grabadas.
No tiene vida propia. Un cubo virtual puede representarlo.
Cambio de imágenes con el tiempo que produce movimiento o transformación.
Reproduce una secuencia de imágenes ya registrada. Puede contener una animación.
Renderizar significa calcular una imagen de la escena. En este ejemplo se vuelve a dibujar según el estado actual de la figura y tus acciones. Una animación puede grabarse como video; lo especial aquí es la interacción en tiempo real.
Experimenta
- Pausa el giro de tu figura.
- Cambia su color y arrástrala para verla desde otro ángulo.
- Agrega la deformación con el prompt de abajo, o pruébala en el ejemplo preparado.
- Mueve el control de deformación y luego vuelve a cero.
Agrega un deslizador "Deformación" que cambie realmente las posiciones de los vértices de la figura, no solo su tamaño global. Parte siempre de una copia de las posiciones originales para que el cambio sea reversible; aplica el mismo desplazamiento a posiciones coincidentes para no abrir grietas. Actualiza las normales y los límites de la geometría. Incluye "Restablecer". Conserva los controles y permite deformar con el giro pausado. Devuelve el archivo HTML completo usando la misma versión de Three.js.
¿Qué se está modificando?
La superficie de un objeto 3D suele estar formada por triángulos. Sus esquinas se llaman vértices. Cambiar esas posiciones modifica la forma. El ejemplo mueve una zona de la figura de manera reversible; no es todavía un editor para arrastrar cada vértice por separado.
No hay una cifra fija de “millones de puntos por segundo”. Un cubo tiene ocho esquinas geométricas, aunque el programa puede repetir sus datos para representar las caras. También se calcula el color de los píxeles de la imagen. La fluidez depende de la escena y del dispositivo; por ejemplo, a 60 imágenes por segundo cada imagen tiene unos 16,7 milisegundos.
De una figura a una escultura
Con las mismas herramientas puedes crear una escena que parezca una pieza de exposición: un nudo toroidal rojo metálico, elevado sobre una base oscura e iluminado como en un estudio.
Tu propia escultura digital
El material, la iluminación, las sombras y las proporciones transforman una figura geométrica en una escena con personalidad.
1. Primero, crea tu prompt
Copia este texto y envíalo a ChatGPT o Claude. En este primer intercambio le pedirás a la IA que redacte un prompt detallado; después usarás ese prompt para crear la escultura.
Necesito un prompt bien detallado para crear en HTML y Three.js un nudo toroidal 3D de color rojo metálico, con una base oscura y sombra realista. Quiero que gire automáticamente de forma lenta y suave, pero que al usar el mouse se pueda detener temporalmente, mover la vista alrededor del objeto y hacer un poco de zoom. La escena debe verse limpia, elegante y bien iluminada, como una escultura de exhibición.
Lo que debes recibir: una instrucción detallada que describa la figura, el material, la iluminación y cómo interactuar con ella. Si la IA entrega código directamente, dile: “Primero dame el prompt detallado para crear esta escena; todavía no generes el HTML”.
2. Ahora, crea la escultura
- Lee el prompt que te entregó la IA. Comprueba que incluya el nudo rojo metálico, la base oscura, las sombras, el giro lento y los controles con el mouse.
- Copia ese prompt y envíalo en un nuevo mensaje o conversación. Añade: “Ejecuta este prompt y entrega el código completo de un único archivo HTML, con CSS y JavaScript incluidos, que pueda abrir con doble clic y conexión a internet. No uses React, npm, servidor local ni archivos auxiliares. Carga Three.js desde https://cdn.jsdelivr.net/npm/three@0.179.1/+esm dentro de un script de tipo module”.
- Copia el HTML de la respuesta en el Bloc de notas.
- Guárdalo como nudo-toroidal.html en tu carpeta Taller_3D, con tipo “Todos los archivos” y codificación UTF-8.
- Ábrelo con doble clic en Chrome o Edge, con conexión a internet.
¿Necesitas ayuda? Usa este prompt preparado
Si te cuesta obtener un prompt detallado o el resultado no es el que esperabas, copia esta versión completa y envíala a la IA para generar el HTML. Ya incluye las proporciones, luces y controles de la escultura.
Crea una visualización 3D interactiva de alta calidad de un **nudo toroidal (torus knot)** usando **Three.js**.
Quiero que el resultado se vea como una **escultura metálica roja de exposición**, colocada sobre una base cilíndrica oscura, con iluminación de estudio, sombras suaves y fondo gris claro.
El resultado debe reproducir estas proporciones y este comportamiento con bastante precisión.
### Formato de entrega
Entrega el **código completo de un único archivo HTML**.
Debe contener dentro del mismo archivo:
- HTML;
- CSS;
- JavaScript.
No uses:
- React;
- npm;
- Node.js;
- servidor local;
- archivos auxiliares;
- frameworks adicionales;
- `OrbitControls`.
El archivo debe poder guardarse como:
`nudo-toroidal.html`
y abrirse directamente haciendo **doble clic** en Chrome o Edge con conexión a Internet.
Dentro de:
```html
<script type="module">
```
carga Three.js exactamente así:
```javascript
const THREE = await import('https://cdn.jsdelivr.net/npm/three@0.179.1/+esm');
```
No importes ningún otro módulo.
---
## Escena
Crea una escena con:
```javascript
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);
```
El fondo debe ser gris muy claro, casi blanco.
No agregues:
- texto;
- botones;
- menús;
- cuadrículas;
- estadísticas;
- paneles;
- controles visibles.
La visualización debe ocupar toda la ventana.
---
## Cámara
Usa una:
```javascript
THREE.PerspectiveCamera
```
con aproximadamente:
```javascript
fov = 42
near = 0.1
far = 100
```
La cámara debe mirar hacia un punto aproximadamente en:
```javascript
(0, 2.15, 0)
```
La posición inicial debe mostrar claramente:
- el nudo completo;
- la base completa;
- parte del suelo;
- la sombra.
Usa una distancia orbital inicial aproximada de:
```javascript
8.6
```
y una perspectiva ligeramente elevada.
---
## Renderizador
Usa:
```javascript
const renderer = new THREE.WebGLRenderer({ antialias: true });
```
Configura:
```javascript
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.1;
```
Añade el canvas directamente al `document.body`.
---
# Nudo toroidal
Usa:
```javascript
THREE.TorusKnotGeometry
```
con aproximadamente estos parámetros:
```javascript
new THREE.TorusKnotGeometry(
1.65,
0.44,
300,
56,
2,
3
);
```
Usa un:
```javascript
THREE.MeshPhysicalMaterial
```
con aspecto de **metal rojo intenso**, parecido a aluminio anodizado o pintura automotriz metálica.
Usa aproximadamente:
```javascript
color: 0xc20b18
metalness: 0.90
roughness: 0.22
clearcoat: 0.60
clearcoatRoughness: 0.16
```
El nudo debe:
```javascript
castShadow = true
receiveShadow = true
```
### Tamaño exacto relativo
Después de crear el nudo, redúcelo a aproximadamente **70 % del tamaño original**:
```javascript
knot.scale.setScalar(0.70);
```
Esto es importante.
El nudo NO debe verse demasiado grande respecto a la base.
Debe quedar bastante espacio visual alrededor del nudo.
### Altura exacta
Coloca el centro del nudo aproximadamente en:
```javascript
knot.position.y = 3.24;
```
Esto también es importante.
El nudo debe quedar claramente elevado sobre la base.
No debe verse embebido dentro de la base ni tocándola visualmente.
Debe existir un espacio perceptible entre la parte inferior del nudo y la superficie superior de la base.
---
# Base
Crea una base cilíndrica elegante usando:
```javascript
THREE.CylinderGeometry
```
con aproximadamente:
```javascript
new THREE.CylinderGeometry(
2.55,
2.68,
0.5,
96
);
```
Usa un material gris muy oscuro / grafito con aproximadamente:
```javascript
color: 0x252525
metalness: 0.20
roughness: 0.58
```
Coloca la base en:
```javascript
base.position.y = 0.25;
```
La base debe:
```javascript
castShadow = true
receiveShadow = true
```
No cambies el tamaño de la base para compensar el tamaño del nudo.
El nudo debe ser intencionalmente pequeño respecto a la base.
---
# Suelo
Crea un plano de aproximadamente:
```javascript
30 × 30
```
con:
```javascript
THREE.PlaneGeometry
```
El material debe ser gris muy claro:
```javascript
color: 0xe8e8e8
roughness: 0.95
```
Rótalo horizontalmente:
```javascript
floor.rotation.x = -Math.PI / 2;
```
El suelo debe recibir sombras:
```javascript
floor.receiveShadow = true;
```
---
# Iluminación
Quiero una iluminación tipo estudio fotográfico.
## Luz ambiental
Usa:
```javascript
THREE.HemisphereLight
```
aproximadamente:
```javascript
new THREE.HemisphereLight(
0xffffff,
0x555555,
1.8
);
```
---
## Luz principal
Usa una luz direccional blanca:
```javascript
THREE.DirectionalLight
```
con intensidad aproximada:
```javascript
4.5
```
y posición:
```javascript
(5, 8, 5)
```
Debe proyectar sombras.
Configura:
```javascript
shadow.mapSize = 2048 × 2048
```
y un volumen de sombra suficientemente grande para abarcar toda la escultura y la base.
---
## Luz de relleno
Añade otra luz direccional ligeramente cálida:
```javascript
color: 0xffe4dc
intensity: 2.2
position: (-5, 4, 4)
```
---
## Luz de borde
Añade una tercera luz direccional ligeramente fría:
```javascript
color: 0xdde8ff
intensity: 2.8
position: (-4, 6, -5)
```
Esta luz debe ayudar a separar visualmente los bordes del nudo del fondo.
El rojo metálico debe mostrar reflejos claramente visibles.
---
# Rotación automática
El nudo debe girar lentamente alrededor de su eje vertical.
Usa:
```javascript
renderer.setAnimationLoop(...)
```
La velocidad debe calcularse usando el tiempo transcurrido entre frames.
No hagas:
```javascript
rotation += cantidad_fija
```
sin considerar el tiempo.
La velocidad debe equivaler aproximadamente a:
**una vuelta completa cada 20 segundos.**
Por ejemplo:
```javascript
knot.rotation.y += (Math.PI * 2 / 20) * dt;
```
---
# Control manual con mouse
NO uses `OrbitControls`.
Implementa directamente el control orbital de cámara usando eventos:
```javascript
pointerdown
pointermove
pointerup
pointercancel
wheel
```
Mantén variables equivalentes a:
```javascript
yaw
pitch
distance
```
La cámara debe calcular su posición orbital alrededor del punto:
```javascript
target = new THREE.Vector3(0, 2.15, 0);
```
---
## Arrastrar con mouse
Cuando el usuario presione y arrastre:
- pausa inmediatamente la rotación automática del nudo;
- mueve la cámara alrededor de la escultura;
- movimiento horizontal → cambia `yaw`;
- movimiento vertical → cambia `pitch`.
Usa aproximadamente:
```javascript
dx * 0.006
dy * 0.0045
```
Limita la inclinación vertical aproximadamente entre:
```javascript
0.10
```
y:
```javascript
0.72
```
radianes.
Así la cámara no puede pasar debajo del suelo.
---
# Movimiento suave
No quiero movimientos bruscos.
Mantén valores objetivo:
```javascript
targetYaw
targetPitch
targetDistance
```
y aproxima gradualmente:
```javascript
yaw
pitch
distance
```
hacia esos valores durante cada frame.
Usa un suavizado dependiente del tiempo, equivalente aproximadamente a:
```javascript
actual += (objetivo - actual) * Math.min(1, dt * 10);
```
El movimiento debe sentirse fluido y ligeramente amortiguado.
---
# Zoom
Permite zoom con la rueda del mouse.
Usa aproximadamente:
```javascript
targetDistance += event.deltaY * 0.008;
```
Limita la distancia de cámara aproximadamente entre:
```javascript
5.4
```
y:
```javascript
11.0
```
El usuario no debe poder entrar dentro del objeto ni alejarse demasiado.
---
# Pausar y reanudar rotación
Cuando el usuario empiece a arrastrar:
```javascript
autoRotate = false;
```
Cuando termine de arrastrar, espera aproximadamente:
```javascript
2000 ms
```
antes de reanudar la rotación automática.
El uso de la rueda del mouse también debe detener temporalmente la rotación y reiniciar ese temporizador de 2 segundos.
Después de esos 2 segundos de inactividad:
```javascript
autoRotate = true;
```
La cámara debe permanecer donde la dejó el usuario.
Solo debe reanudarse el giro del nudo.
---
# Cursor
Cuando el mouse esté sobre el canvas:
```css
cursor: grab;
```
Mientras esté presionado:
```css
cursor: grabbing;
```
---
# Responsive
Cuando cambie el tamaño de la ventana:
- actualiza `camera.aspect`;
- ejecuta `camera.updateProjectionMatrix()`;
- actualiza `renderer.setSize(...)`;
- conserva:
```javascript
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
```
---
# Resultado visual esperado
El resultado debe mostrar:
- un **nudo toroidal rojo metalizado relativamente pequeño**;
- claramente elevado sobre la base;
- una **base cilíndrica ancha de grafito oscuro**;
- suelo gris claro;
- sombras suaves;
- iluminación de estudio;
- reflejos metálicos visibles;
- fondo minimalista;
- rotación automática lenta;
- control orbital suave con el mouse;
- zoom moderado con la rueda;
- pausa automática al interactuar;
- reanudación del giro después de 2 segundos.
Muy importante:
**No agrandes el nudo para llenar la pantalla.**
Mantén:
```javascript
knot.scale.setScalar(0.70);
knot.position.y = 3.24;
```
y conserva la base con sus dimensiones indicadas.
Entrega únicamente el HTML completo y funcional, listo para copiar, guardar y abrir directamente en el navegador.¿Qué es un nudo toroidal?
Imagina un tubo que da vueltas siguiendo un recorrido entrelazado y se cierra sobre sí mismo. Three.js permite construir esta forma con TorusKnotGeometry.
Recorre tu escultura
- Observa: el nudo gira lentamente, aproximadamente una vuelta cada 20 segundos.
- Arrastra: cambia el punto de vista con el ratón. El giro del nudo se pausa mientras interactúas.
- Usa la rueda: acerca o aleja la cámara.
- Deja de interactuar: tras unos dos segundos, el nudo vuelve a girar. La cámara conserva tu punto de vista.
No verás botones ni menús: la escena ocupa toda la ventana. En celular puedes pegar el HTML en el Editor de práctica y probar el arrastre con el dedo; la rueda de zoom corresponde al computador.
Crea, guarda y comparte lo aprendido
Tu reto: una figura que tenga una decisión tuya y una interacción que puedas explicar.
Elige un reto según tu ritmo
- Esencial: cambia el color y la velocidad; conserva el botón de pausa.
- Un paso más: cambia entre tres figuras y agrega un título propio.
- Exploración: deforma la figura o pide dos objetos que se muevan de forma distinta.
Comprueba tu resultado
Si estás en el editor de práctica, usa Descargar HTML. En computador, guarda tu versión final como mi-creacion-3d.html. Abrir un archivo local no lo publica en internet: para compartirlo puedes enviar el archivo; la otra persona necesitará internet para cargar Three.js.
30 minutos para explorar juntos
Dedica unos 20 minutos a crear o pedir ayuda, 5 a mostrar tu resultado a otra persona y 5 al cierre del grupo. Comparte qué pediste, qué cambiaste y qué te sorprendió.
Ayuda: veo una pantalla vacía o un error
- Comprueba la conexión a internet.
- Confirma que copiaste el código completo y guardaste como .html, no .html.txt.
- Actualiza la página y revisa cualquier mensaje visible.
- Prueba el ejemplo preparado. Si ese funciona, pide a la IA que repare tu versión.
- Si tampoco funciona, prueba un navegador actualizado u otro computador. Puede haber un problema con los gráficos del dispositivo o con la carga de la biblioteca.
Estoy probando el HTML de una animación Three.js en un taller. Lo abro con doble clic y tengo internet. Esperaba ver: [describe el resultado]. Lo que ocurre es: [describe lo que ves o pega el mensaje exacto]. Revisa el código que pego abajo y corrige la causa. Mantén un único archivo HTML, sin npm, React, servidor local ni archivos externos propios. Conserva la importación HTTPS de Three.js. Devuelve el HTML completo corregido y explica brevemente el cambio. [Pega aquí tu código completo]