Saltar al contenido
Chandler Nguyen
IA9 min de lectura

Me costó cuatro intentos construir una habitación en three.js

Quería construir algo en three.js después de ver trabajos 3D increíbles en X. Hicieron falta cuatro intentos, varios modelos de IA y muchas versiones rechazadas antes de que una habitación alcanzara mi nivel. Qué salió mal cada vez y qué aprendí sobre el gusto.

Acabo de poner una habitación en este sitio. Es un estudio en una casa que no existe, sobre una colina frente al océano, y puedes recorrerlo, sentarte y tomar cosas en las manos. La casa es imaginaria. Todo lo que puedes tomar en ella es real: mis libros, los cursos que hice, los productos que construí, los parques que he visitado y las recomendaciones que me escribieron colegas en LinkedIn.

Llegar hasta aquí me costó cuatro intentos, y los tres primeros fallaron. Creo que cómo fallaron es más útil que la habitación en sí, así que de eso trata este artículo.

Por qué three.js

Empezó en X (Twitter). Veía allí trabajos 3D increíbles, cosas que la gente había construido para correr en el navegador con three.js, y quería probarlo yo mismo. Esa era, en realidad, toda la razón. Cuando anotamos el objetivo del primer intento, era simplemente este: el punto es construir algo en three.js. Tenía curiosidad.

Primer intento: diez estilos para la misma idea

A finales de septiembre empecé con el archivo de mi blog como tema: 523 artículos, dispuestos en el espacio por fecha y por tema. Construimos seis conceptos como renders de verdad: un paisaje de columnas, una impresión en risografía a dos tintas, un mapa de estrellas, una tormenta de papel, un relieve de terreno y un pequeño diorama de escritorio. Otras cuatro ideas (un libro, un árbol, una sala de imprenta, tinta en agua) llegaron solo hasta maquetas rápidas. Abajo están nueve de las diez. El paisaje de columnas nunca se guardó.

Una impresión a dos tintas
Un mapa de estrellas
Un terreno
Una tormenta de papel
Un escritorio de papel
Un libro, en maqueta
Una imprenta, en maqueta
Un árbol, en maqueta
Tinta en agua, en maqueta

Rechacé las diez. Cuando anotamos por qué, la conclusión fue sencilla. Cada intento era la misma idea, puntos hechos con los mismos artículos, con un renderizador distinto. Cambiar de técnica diez veces no podía arreglar que la pieza no tuviera un tema real. También habíamos dibujado los mismos datos como un gráfico 2D simple, como el listón que tenía que superar la versión 3D, que es una buena prueba que recomendaría a cualquiera que se sienta tentado por el 3D porque sí.

Un gráfico 2D simple de 523 artículos a lo largo de diecinueve años, una fila por tema, usado como el listón que debía superar cada versión 3D

Intentos dos y tres: un tema real y la pelea equivocada

A principios de octubre lo intenté de nuevo con temas reales: cómo Ask Sydney encuentra las fuentes detrás de una respuesta y cómo funciona por dentro uno de mis productos. Las primeras versiones eran simples, y estaban hechas en realidad para gente como yo, a quien ya le importa cómo funciona un pipeline.

Así que hicimos una pasada seria de dirección de arte en ambas. Modelos hechos en Blender, un entorno iluminado, bloom, profundidad de campo, niebla y sombras suaves. Las piezas estaban probadas, eran accesibles y estaban listas para traducir. Aun así, las juzgué insuficientes, porque las comparaba con el arte conceptual que había generado con un modelo de imágenes antes de empezar, y a su lado perdían siempre.

Aquí está cada pieza en tres etapas: la primera versión, la versión con dirección de arte y el arte conceptual con el que la comparaba. Primero, cómo Ask Sydney encuentra sus fuentes:

Primera versión
Con dirección de arte
El arte conceptual

Y cómo DIALØGUE hace un episodio:

Primera versión
Con dirección de arte
El arte conceptual

La lección que anotamos fue que el three.js en tiempo real no puede igualar un render fotorrealista offline. Una imagen fija puede dedicar minutos a un solo fotograma para dejar la iluminación, la profundidad de campo y cada textura exactamente como debe ser. Un navegador tiene unos pocos milisegundos por fotograma. Así que la regla para el siguiente intento fue esta: el 3D en tiempo real nunca compite en realismo. Gana respondiendo a la persona que tiene delante, y si un video pudiera reemplazar la pieza, la pieza está mal.

Cuarto intento, y todavía muchos no

Esos tres intentos usaron distintos modelos y herramientas, entre ellos DeepSeek y GPT de OpenAI. Ninguno llegó a mi nivel de calidad. El cuarto intento, a principios de noviembre, fue con Claude Opus 5.5 en Claude Code.

Me encantaría decir que funcionó a la primera. No fue así. Antes de la habitación, dije que no a un conjunto de vasos de agua que mostraban cómo repartir un presupuesto de medios (demasiado táctico), una pieza de tinta, un paisaje de papel recortado para sobrevolar (demasiado insípido), cuatro bocetos de otros mundos, un museo recorrible de mi carrera y un estudio con seis escritorios, uno por cada disciplina de marketing. Mi nota sobre el estudio fue que estaba "muy lejos del efecto wow" que buscaba y que "los seis escritorios son horribles". Lo eran.

Vasos de agua: demasiado táctico
Una pieza de tinta
Un paisaje de papel: demasiado insípido
Una bandada
Un salón de vitrales
Un pequeño mundo
Una ciudad de noche
Un museo de mi carrera
Un estudio con seis escritorios

La idea que funcionó vino de mí, no del modelo. ¿Y si el visitante es un invitado en la casa de mis sueños y le enseño mi estudio? Describí la habitación tal como la imagino: el escritorio con mi espalda contra la ventana, la biblioteca, un sofá largo y una mesa para sentarse a tomar café y conversar, una chimenea y, afuera, árboles y olas del océano, como en Big Sur. Cuando vi la primera versión funcionando dije "sí, esta es la dirección".

Después vinieron los detalles. Rechacé los sofás abultados, una mesa genérica, una puerta fea, una lámpara de pie y árboles que no se parecían a Big Sur. Lo que pedí fue un "estudio de clase mundial y de lujo discreto". Antes, en el proyecto, había intentado describir la sensación con el lobby de un buen hotel, donde el olor y las flores te hacen sentir seguro y atendido, y con un tazón de ramen, que "parece simple pero es muy difícil hacerlo bien". Sigue siendo la mejor descripción que tengo.

A la izquierda está una versión temprana de la habitación y, a la derecha, la habitación de hoy.

La misma vista desde el sofá dos veces: una versión temprana con sofás abultados, una mesa oval oscura y una lámpara de pie, y la habitación de hoy con un sofá bajo y entallado, una mesa de piedra clara, una silla redonda y la costa afuera

Cómo está hecha

Blender construye la habitación y hornea la luz en ella, con su renderizador Cycles, para que el navegador no tenga que calcular cómo cae la luz del sol sobre el piso. Luego three.js dibuja la habitación en vivo y se encarga de todo lo que responde a ti: caminar, sentarte, tomar cosas, quedarte hasta el atardecer.

Hay una regla de honestidad. La casa es imaginaria y lo dice, pero todo lo que un invitado toma en las manos es real y tiene una fuente. Las palabras en cada objeto son breves, porque mi regla para la habitación era mostrarla en 3D, con una línea corta y sin un muro de texto.

La habitación también funciona en 13 idiomas, y tiene una versión escrita para lectores de pantalla y para quien use un navegador que no pueda dibujarla.

Los primeros diez segundos

Antes del lanzamiento probamos la habitación en una versión de desarrollo, que es más lenta que el sitio real, con tres visitantes simulados, cada uno con un rol, un dispositivo y una velocidad de conexión distintos, y sin ninguna explicación de la página. Eran agentes de IA, no personas reales, así que lo trato como una prueba de humo y no como una investigación. Aun así, el resultado fue claro. El más rápido vio una pantalla negra con "Bienvenido, tómate tu tiempo." durante unos ocho segundos. Los otros dos vieron negro durante los diez segundos completos. Dos de ellos dijeron que se habrían ido por su cuenta. "Tómate tu tiempo" se leyó como "espera", y nada decía qué era la página.

Así que ahora una imagen fija de la habitación aparece desde el primer segundo, con mi nombre y una línea debajo, y las fotos de los parques se cargan solo cuando la habitación está lista. Todavía no tengo datos de visitantes reales.

Después del lanzamiento seguí trabajando, porque un teléfono lento simulado aún tardaba unos 8 segundos en ponerse en marcha. Ahora el navegador empieza a descargar la habitación junto con la página y no después de que cargue su código, la vista del océano llega a la mitad del tamaño y se afina un momento después, y el modelo 3D pasó de 2.8 MB a 0.81 MB, sin ninguna diferencia que yo pueda ver. En un teléfono lento simulado, la habitación ahora se pone en marcha en unos 4.5 segundos. En mi propio teléfono va fluida.

Lo que aprendí

El gusto importa más que nunca. Hay que tener el gusto, y también el vocabulario, para pedirle a la máquina que cree lo que tienes en mente. De principio a fin, las ideas y los no fueron míos, y los modelos de IA hicieron la construcción. Lo que decidió si algo se volvía bueno fue si yo podía decir qué estaba mal (abultado, genérico, demasiado insípido, no es Big Sur) y qué quería en su lugar. Cuando no podía describirlo, obtenía una versión muy bien hecha de lo equivocado.

Un producto es un medio para un fin, no el fin en sí mismo. Tienes que entender por qué lo construyes, a quién sirve y qué conclusiones o impresiones quieres dejar en las personas. Los primeros intentos partieron de una técnica. La habitación partió de un visitante que nunca me ha conocido: qué toma en las manos y qué piensa cuando se va. Una vez que eso quedó claro, muchas decisiones se tomaron solas.

¿Importó el modelo? Creo que sí. Es el primero que logró que la habitación superara mi nivel. Sin embargo, cuando releo las notas de los cuatro intentos, el tema y el propósito cambiaron tanto como el modelo, y sinceramente no puedo separar las dos cosas.

La habitación está en chandlernguyen.com/study. Funciona también en un teléfono, comprobé el mío. Si has construido algo en 3D con IA, o lo intentaste y lo dejaste, ¿qué te detuvo? Tengo curiosidad por saber si fueron las herramientas o la idea.