La forma de programar está cambiando muy rápido.

Durante los últimos meses hemos hablado muchísimo de Vibe Coding, de herramientas como Claude Code, OpenAI Codex o Cursor y de una nueva manera de desarrollar software en la que buena parte de nuestra interacción con el código comienza directamente con lenguaje natural.

Pero hay un terreno donde, en mi opinión, este cambio resulta especialmente interesante:

el desarrollo 3D para web con Three.js.

Porque una cosa es pedirle a una Inteligencia Artificial que genere un formulario, una landing page o un dashboard.

Y otra bastante diferente es decirle:

Crea una escena 3D interactiva con iluminación ambiental, partículas, varios objetos flotantes, movimiento de cámara y una interacción mediante el ratón.

Y unos minutos después tener algo funcionando directamente en el navegador.

Aquí es donde la combinación de Vibe Coding + Three.js + Claude Code empieza a ser realmente potente.

No porque podamos olvidarnos completamente de programar.

Precisamente porque podemos dedicar mucho más tiempo a pensar qué queremos construir, experimentar, iterar y dirigir el proyecto, mientras utilizamos la IA para acelerar una gran parte de la implementación.

¿Qué es Three.js?

Three.js es una biblioteca JavaScript especializada en gráficos 3D para web.

Su objetivo es facilitar enormemente la creación de experiencias tridimensionales dentro del navegador.

Trabajar directamente con WebGL puede ser bastante complejo. Three.js proporciona una capa mucho más accesible para trabajar con conceptos como:

• escenas;
• cámaras;
• luces;
• geometrías;
• materiales;
• texturas;
• modelos 3D;
• animaciones;
• partículas;
• sombras;
• postprocesado.

La propia documentación de Three.js explica que WebGL trabaja en un nivel bastante bajo, mientras que Three.js se ocupa de buena parte de los elementos que normalmente tendríamos que desarrollar nosotros mismos: escenas, iluminación, sombras, materiales, texturas y matemáticas 3D.

Para crear una escena básica necesitamos fundamentalmente tres elementos:

Scene + Camera + Renderer.

A partir de ahí podemos añadir objetos, materiales, iluminación y animaciones.

El clásico ejemplo de iniciación sería algo parecido a esto:

import * as THREE from 'three';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

const renderer = new THREE.WebGLRenderer({
    antialias: true
});

renderer.setSize(
    window.innerWidth,
    window.innerHeight
);

document.body.appendChild(
    renderer.domElement
);

const geometry = new THREE.BoxGeometry(1, 1, 1);

const material = new THREE.MeshStandardMaterial({
    color: 0x6366f1
});

const cube = new THREE.Mesh(
    geometry,
    material
);

scene.add(cube);

camera.position.z = 5;

Hasta aquí estamos hablando simplemente de código.

Lo realmente interesante aparece cuando introducimos Claude Code dentro del proyecto.

¿Qué tiene que ver Three.js con el Vibe Coding?

Muchísimo.

Three.js tiene una característica que encaja especialmente bien con esta nueva forma de desarrollo:

el feedback es prácticamente inmediato.

Creamos algo.

Abrimos el navegador.

Lo vemos.

Lo modificamos.

Volvemos a probarlo.

Podemos decirle a Claude Code:

La cámara está demasiado cerca. Aléjala ligeramente y añade una transición suave cuando el usuario mueve el ratón.

Probamos.

Después:

Añade partículas alrededor del objeto principal, pero quiero que reaccionen lentamente al movimiento del cursor.

Probamos de nuevo.

Después:

Reduce el número de partículas en dispositivos móviles y optimiza el rendimiento.

Y seguimos trabajando.

Ese ciclo:

idea → prompt → código → navegador → revisión → nueva instrucción

es probablemente una de las representaciones más claras de lo que puede significar trabajar mediante Vibe Coding.

Vibe Coding no significa simplemente “programar sin saber programar”

Aquí creo que merece la pena hacer una pequeña puntualización.

Muchas veces estamos utilizando el término Vibe Coding como equivalente a:

Crear aplicaciones mediante IA sin saber programación.

Puede ser una puerta de entrada.

Pero creo que quedarse únicamente ahí limita bastante el concepto.

Cuando una persona entiende HTML, CSS, JavaScript, Git, APIs, arquitectura web o conceptos básicos de programación, herramientas como Claude Code multiplican enormemente sus posibilidades.

El desarrollador deja de escribir manualmente absolutamente cada línea y empieza a dedicar más tiempo a:

definir, diseñar, supervisar, probar, depurar y evolucionar el software.

La habilidad cambia.

Ya no se trata únicamente de saber escribir código.

También debemos saber explicar exactamente qué queremos construir.

Y esto conecta directamente con otra disciplina que considero cada vez más importante:

la Ingeniería de Prompts aplicada al desarrollo.

Un buen desarrollador trabajando con IA necesita saber definir:

• contexto;
• restricciones;
• arquitectura;
• comportamiento;
• tecnologías;
• objetivos;
• criterios de aceptación.

Cuanto mejor definamos el problema, mejores resultados podremos obtener.

Claude Code + Three.js: una combinación especialmente interesante

Aquí entra uno de los grandes protagonistas actuales del desarrollo asistido por Inteligencia Artificial:

Claude Code.

Claude Code trabaja directamente desde el terminal y puede comprender el contexto del proyecto sobre el que estamos trabajando.

No estamos simplemente copiando código desde un chatbot.

Puede explorar nuestra base de código, editar archivos, ejecutar comandos, corregir errores y trabajar sobre diferentes partes del proyecto. Anthropic lo describe precisamente como una herramienta de programación agéntica capaz de trabajar directamente sobre el proyecto y realizar acciones dentro del entorno de desarrollo.

Eso cambia bastante el flujo de trabajo.

Podemos entrar en nuestro proyecto:

cd proyecto-threejs
claude

Y empezar a trabajar directamente sobre él.

Por ejemplo:

Analiza este proyecto Three.js.

Quiero convertir la escena actual en una landing page
3D interactiva.

Mantén la estructura existente.

Añade:

- iluminación ambiental cinematográfica;
- partículas en segundo plano;
- interacción suave con el ratón;
- animación de entrada;
- diseño responsive;
- optimización para dispositivos móviles.

Antes de modificar archivos, analiza la arquitectura
actual y explícame el plan de implementación.

Aquí ya no estamos pidiendo un fragmento aislado de código.

Estamos proporcionando una especificación.

Claude Code analiza el proyecto y puede comenzar a trabajar sobre esa estructura.

Mi forma de trabajar con Claude Code y Three.js

Una de las cosas que considero más importantes cuando trabajo mediante Vibe Coding es no empezar directamente pidiendo código.

Prefiero dividir el proceso en diferentes fases.

1. Primero: definir el proyecto

Antes de escribir nada:

Quiero desarrollar una experiencia web 3D utilizando Three.js.

Será una landing page tecnológica.

El usuario podrá desplazarse por una escena 3D mediante scroll.

Quiero:

- una escena principal;
- objetos geométricos flotantes;
- profundidad;
- partículas;
- iluminación dinámica;
- interacción con ratón;
- animaciones mediante scroll;
- responsive;
- buen rendimiento.

Analiza los requisitos.

Propón primero la arquitectura del proyecto.
No escribas código todavía.

Esta primera fase resulta fundamental.

Estamos obligando al sistema a pensar en el proyecto antes de implementarlo.

2. Después: construir una versión mínima

Una vez tenemos clara la arquitectura:

Implementa ahora una primera versión funcional.

Prioriza:

1. escena;
2. cámara;
3. renderer;
4. iluminación;
5. objeto principal;
6. animación básica.

No añadas todavía partículas ni efectos avanzados.

Quiero poder comprobar primero que la arquitectura
funciona correctamente.

Aquí reducimos muchísimo la complejidad.

En lugar de intentar generar todo el proyecto de golpe, trabajamos mediante pequeñas iteraciones.

3. Iterar visualmente

Y esta es probablemente mi parte favorita cuando trabajo con Three.js.

Abrimos el navegador.

Miramos.

Probamos.

Y empezamos a dirigir.

El objeto principal funciona correctamente.

Ahora quiero mejorar la composición visual.

Mueve la cámara ligeramente hacia abajo.

Añade profundidad utilizando varios objetos
secundarios.

Quiero que los objetos más alejados se muevan
más lentamente.

Añade además un efecto parallax muy suave
siguiendo el movimiento del ratón.

Esto es Vibe Coding en estado puro.

Pero seguimos manteniendo una dirección clara sobre el proyecto.

Qué proyectos podemos crear con Three.js y Claude Code

Aquí es donde aparecen muchísimas posibilidades.

Three.js no sirve únicamente para crear una esfera flotando sobre una página.

Podemos desarrollar proyectos bastante interesantes.

Landing pages 3D

Probablemente uno de los casos más evidentes.

Podemos crear páginas donde el contenido HTML tradicional convive con una escena tridimensional.

Por ejemplo:

Hero 3D

↓

animación mediante scroll

↓

transformación del objeto

↓

contenido de producto

↓

CTA

Este tipo de experiencias pueden funcionar especialmente bien para:

• empresas tecnológicas;
• productos digitales;
• videojuegos;
• arquitectura;
• automoción;
• portfolio creativo;
• moda;
• entretenimiento.

Configuradores de productos 3D

Otro terreno especialmente interesante.

Imaginemos una tienda donde podemos visualizar un producto y modificar:

• colores;
• materiales;
• componentes;
• accesorios;
• iluminación.

Three.js permite trabajar con modelos tridimensionales directamente desde el navegador.

La IA puede ayudarnos a desarrollar rápidamente buena parte de la lógica del configurador.

Videojuegos directamente en el navegador

Three.js también permite crear pequeños videojuegos y experiencias interactivas.

Podemos trabajar con:

• movimiento;
• cámaras;
• colisiones;
• escenarios;
• partículas;
• interfaces;
• puntuaciones;
• enemigos;
• animaciones.

No sustituye necesariamente a motores especializados como Unity cuando hablamos de proyectos de mayor escala.

Pero para determinados juegos web, demos, prototipos y experiencias interactivas puede resultar tremendamente interesante.

Y especialmente cuando utilizamos Claude Code para acelerar el desarrollo.

Visualización de datos en 3D

También podemos salir completamente del terreno creativo.

Three.js puede utilizarse para representar:

• redes;
• nodos;
• mapas;
• datos científicos;
• infraestructuras;
• estructuras empresariales;
• relaciones entre información.

Aquí aparece otra combinación especialmente interesante:

datos + IA + visualización 3D.

Podemos transformar información compleja en una experiencia visual interactiva.

Arquitectura y Digital Twins

Otro sector donde las tecnologías 3D tienen muchísimo recorrido.

Podemos cargar modelos y construir interfaces donde el usuario navegue por:

• edificios;
• instalaciones;
• fábricas;
• espacios comerciales;
• infraestructuras.

Podemos además conectar esos elementos con datos reales mediante APIs.

De esta manera un objeto 3D deja de ser simplemente una representación visual.

Puede convertirse en una interfaz para consultar información.

Three.js, WebGL y WebGPU

Hay otro punto que me parece especialmente interesante mirando hacia los próximos años.

Three.js lleva años trabajando principalmente sobre WebGL, pero actualmente también dispone de WebGPURenderer, presentado por el propio proyecto como la alternativa moderna a WebGLRenderer.

Cuando el navegador soporta WebGPU puede utilizarlo como backend y, cuando no está disponible, puede recurrir a WebGL 2.

Además incorpora tecnologías como:

• sistema de materiales basado en nodos;
• TSL, Three.js Shading Language;
• nuevo sistema de postprocesado;
• acceso a capacidades modernas de WebGPU.

Para alguien interesado en desarrollo web, videojuegos, experiencias interactivas e Inteligencia Artificial, me parece un ecosistema especialmente interesante para seguir durante los próximos años.

El gran problema del Vibe Coding: cuando el proyecto empieza a crecer

Hasta ahora todo parece fantástico.

Pero existe un punto importante.

Generar rápidamente una demo es relativamente sencillo.

Mantener un proyecto grande ya es otra historia.

Aquí aparecen problemas como:

• archivos demasiado grandes;
• funciones duplicadas;
• dependencias innecesarias;
• código difícil de mantener;
• problemas de rendimiento;
• memoria;
• errores difíciles de localizar.

Por eso utilizo una regla bastante sencilla:

cada cierto número de iteraciones, hay que dejar de añadir cosas.

Y decirle al agente:

Detente.

Analiza el estado actual del proyecto.

No añadas nuevas funcionalidades.

Busca:

- código duplicado;
- funciones demasiado grandes;
- problemas de arquitectura;
- posibles memory leaks;
- problemas de rendimiento;
- dependencias innecesarias.

Propón una refactorización.

No realices ningún cambio hasta mostrarme primero
el plan.

Este tipo de instrucciones son probablemente tan importantes como las que utilizamos para crear nuevas funcionalidades.

Rendimiento: uno de los grandes retos de Three.js

Cuando trabajamos con 3D tenemos que tener siempre presente que estamos utilizando la GPU del dispositivo.

Podemos crear una escena espectacular en nuestro ordenador y descubrir después que funciona fatal en un teléfono móvil.

La propia documentación de Three.js dedica una atención especial al tamaño de renderizado, las pantallas de alta densidad y el impacto que una resolución demasiado elevada puede tener sobre la GPU.

Por eso debemos prestar atención a cuestiones como:

• número de polígonos;
• tamaño de las texturas;
• número de luces;
• sombras;
• partículas;
• llamadas de renderizado;
• resolución;
• dispositivos móviles.

También podemos utilizar técnicas como:

• instancing;
• LOD;
• carga progresiva;
• compresión de modelos;
• optimización de texturas.

Aquí Claude Code puede volver a ser especialmente útil.

Podemos pedirle que analice nuestra escena desde el punto de vista del rendimiento.

Un prompt que utilizaría para optimizar un proyecto Three.js

Actúa como desarrollador senior especializado
en Three.js y optimización WebGL/WebGPU.

Analiza todo el proyecto.

No modifiques todavía ningún archivo.

Busca específicamente:

- geometrías demasiado complejas;
- texturas demasiado grandes;
- materiales duplicados;
- exceso de draw calls;
- objetos que podrían utilizar instancing;
- oportunidades de aplicar LOD;
- problemas de resize;
- problemas con devicePixelRatio;
- recursos que no estén siendo liberados;
- posibles memory leaks.

Clasifica los problemas por:

CRÍTICO
ALTO
MEDIO
BAJO

Después propón un plan de optimización progresivo
que mantenga el aspecto visual actual.

Este es otro buen ejemplo de cómo cambia nuestra relación con el código.

No necesitamos utilizar la IA únicamente para generar.

También podemos utilizarla para:

analizar, revisar, refactorizar y optimizar.

Vibe Coding + Three.js: qué deberíamos aprender realmente

Aquí creo que está una de las cuestiones más importantes.

¿Tenemos que aprender Three.js si Claude Code puede escribir el código?

Mi respuesta es bastante clara.

Sí.

Pero nuestra manera de aprender puede ser diferente.

No necesitamos memorizar absolutamente todos los métodos disponibles.

Necesitamos comprender los conceptos.

Por ejemplo:

Scene

El espacio donde viven nuestros objetos.

Camera

Determina desde dónde observamos la escena.

Renderer

Se encarga de representar la escena dentro del navegador.

Geometry

Define la forma del objeto.

Material

Define cómo se comporta visualmente su superficie.

Mesh

Combina geometría y material.

Lights

Iluminan los objetos de nuestra escena.

Animation Loop

Permite actualizar continuamente posiciones, rotaciones, cámaras y efectos.

Cuando entendemos estas piezas podemos dirigir mucho mejor a una IA.

Y, sobre todo, podemos detectar rápidamente cuándo está haciendo algo que no tiene sentido.

El futuro del desarrollo no consiste en dejar de programar

Creo que este es uno de los errores más habituales cuando hablamos de Vibe Coding.

La conversación suele plantearse como:

IA contra programadores.

Desde mi punto de vista, esa no es la parte realmente interesante.

La pregunta debería ser:

¿Qué puede construir ahora un desarrollador utilizando estas herramientas que anteriormente habría necesitado semanas para desarrollar?

Ese cambio es mucho más profundo.

Un desarrollador puede utilizar Claude Code para trabajar sobre una base de código completa.

Puede utilizar Three.js para crear experiencias 3D.

Puede utilizar modelos generativos para crear assets.

Puede utilizar APIs para conectar información.

Puede desplegar el resultado en Internet.

Estamos empezando a trabajar con una capacidad de producción completamente diferente.

De programador a director del proyecto

Hay una idea que cada vez considero más importante.

Trabajando mediante Vibe Coding, una parte creciente del trabajo consiste en convertirnos en directores del proyecto técnico.

Tenemos que decidir:

• qué queremos construir;
• cómo debería funcionar;
• qué arquitectura necesitamos;
• cuáles son las restricciones;
• cómo debemos dividir el problema;
• cuándo algo está terminado;
• cuándo debemos refactorizar;
• cuándo una solución es suficientemente buena.

La IA puede producir código muy rápidamente.

Pero alguien tiene que saber qué código merece la pena producir.

Y ahí continúa estando gran parte del valor.

¿Merece la pena aprender Three.js en 2026?

En mi opinión, sí.

Especialmente si ya trabajas con:

• JavaScript;
• desarrollo frontend;
• diseño web;
• desarrollo de videojuegos;
• experiencias digitales;
• visualización de datos;
• Inteligencia Artificial.

Three.js permite llevar el desarrollo web hacia un terreno completamente diferente.

Y herramientas como Claude Code reducen considerablemente la fricción necesaria para experimentar con tecnologías que anteriormente podían resultar mucho más difíciles de abordar.

Three.js continúa además evolucionando alrededor de tecnologías web modernas, incluyendo WebGPU y su nuevo WebGPURenderer.

Por eso creo que estamos ante una combinación especialmente interesante:

Three.js + Claude Code + Vibe Coding.

Una tecnología visual.

Un agente capaz de trabajar directamente sobre nuestro proyecto.

Y una nueva metodología de desarrollo basada en iteración, especificaciones y lenguaje natural.

Conclusión: Three.js puede ser uno de los mejores laboratorios para aprender Vibe Coding

Si quieres aprender realmente cómo trabajar con Inteligencia Artificial aplicada al desarrollo, mi recomendación es sencilla:

crea proyectos.

No te quedes únicamente generando pequeños fragmentos de código.

Construye algo.

Una landing 3D.

Un pequeño videojuego.

Un configurador.

Una visualización de datos.

Una experiencia interactiva.

Empieza con una versión sencilla.

Después añade funcionalidades.

Rompe cosas.

Corrige errores.

Refactoriza.

Optimiza.

Y utiliza herramientas como Claude Code como compañero de desarrollo durante todo el proceso.

Porque ahí es donde realmente empezamos a entender el potencial del Vibe Coding.

No cuando conseguimos que una IA nos escriba diez líneas de JavaScript.

Cuando somos capaces de pasar de una idea a un proyecto real, funcional y desplegado.

Y personalmente creo que Three.js es uno de los terrenos más interesantes para hacerlo ahora mismo.

Preguntas frecuentes sobre Vibe Coding, Three.js y Claude Code

¿Qué es Vibe Coding?

Vibe Coding es una forma de desarrollar software donde utilizamos modelos de Inteligencia Artificial y lenguaje natural para generar, modificar, depurar y evolucionar código mediante un proceso continuo de instrucciones e iteraciones.

Su verdadero potencial aparece cuando combinamos la generación mediante IA con conocimientos de programación, arquitectura y definición de proyectos.

¿Qué es Three.js?

Three.js es una biblioteca JavaScript que facilita la creación de gráficos y experiencias 3D directamente dentro del navegador.

Proporciona herramientas para trabajar con escenas, cámaras, geometrías, materiales, luces, texturas y animaciones, evitando tener que trabajar directamente con todas las complejidades de una API gráfica de bajo nivel.

¿Se puede utilizar Claude Code con Three.js?

Sí.

Claude Code puede trabajar directamente sobre un proyecto Three.js, analizar su estructura, modificar archivos, ejecutar comandos y ayudar en tareas de implementación, depuración y refactorización.

¿Necesito saber JavaScript para utilizar Three.js con Inteligencia Artificial?

Es posible crear pequeños experimentos mediante IA sin tener grandes conocimientos de JavaScript.

Sin embargo, conocer JavaScript, HTML, CSS y conceptos fundamentales de programación permite trabajar de forma mucho más eficaz, detectar errores y desarrollar proyectos considerablemente más sólidos.

¿Qué puedo crear utilizando Three.js y Claude Code?

Entre otras posibilidades:

• páginas web 3D;
• landing pages interactivas;
• portfolios;
• configuradores de productos;
• videojuegos web;
• visualizaciones de datos;
• experiencias educativas;
• mapas interactivos;
• visualización arquitectónica;
• prototipos de digital twins.

¿Three.js utiliza WebGL o WebGPU?

Three.js ha utilizado tradicionalmente WebGL y mantiene WebGLRenderer. Actualmente también dispone de WebGPURenderer, diseñado como alternativa moderna capaz de utilizar WebGPU cuando está disponible y recurrir a WebGL 2 como backend alternativo.