---
title: "img2threejs: Imagen a código Three.js editable"
canonical: https://wavect.io/es/blog/img2threejs-image-to-editable-3d/
language: es
description: "Convierte una imagen en código Three.js editable con img2threejs. Revisa la instalación, los límites de GLB y las pruebas para integrar tu prototipo web."
image: "https://wavect.io/img/blog/headers/header_img2threejs-image-to-editable-3d.png"
author: ["Kevin Riedl"]
published: "2026-11-07"
updated: "2026-11-07"
reviewed: "2026-11-07"
---

# img2threejs: de una imagen a código Three.js editable

[**Volver**](/es/blog/overview/)

[![Kevin Riedl](/img/team/kevin.webp)](/es/team/kevin-riedl/)

[Kevin Riedl](/es/team/kevin-riedl/) https://linkedin.com/in/wsdt

13 min de lectura · 7 de noviembre de 2026 Última revisión 7 de noviembre de 2026

[**Siguiente**](/es/blog/ai-3d-model-generators-game-development-2026/)

Resumen

img2threejs organiza el trabajo de un agente de programación para reconstruir una imagen como código Three.js editable. La salida incluye una especificación y una función TypeScript; los parámetros útiles y las interacciones de producto requieren desarrollo adicional. Comprueba la instalación, la interfaz generada y los límites de exportación a GLB. Empieza con un objeto y verifica sus dimensiones, materiales, movimiento y rendimiento en el dispositivo de destino. El ejemplo y las comprobaciones son propuestas, no resultados de una reconstrucción ejecutada.

La foto de producto muestra tu lámpara de escritorio. Un configurador también necesita cambiar el color de la pantalla y girar el cabezal sobre la bisagra correcta. Para eso, el modelo debe tener piezas diferenciadas que la aplicación pueda controlar.

**img2threejs es una skill para agentes que reconstruye una imagen de referencia como un modelo procedural de Three.js escrito en TypeScript.** Organiza el trabajo del agente en etapas de modelado. El resultado es código que puedes revisar y modificar, con una jerarquía de objetos que puede servir de base para las interacciones. El [repositorio oficial de img2threejs](https://github.com/img2threejs/img2threejs) explica ese planteamiento.

**Fuentes comprobadas: 7 de noviembre de 2026.** Esta guía se basa en la documentación del proyecto y en el código del generador de la versión v2.0.1. La lámpara y las comprobaciones de aceptación son ejercicios propuestos. No hemos ejecutado una reconstrucción ni medido su velocidad, fidelidad o coste.

[img2threejs.org se presenta como un servicio alojado independiente](https://img2threejs.org/github). Su flujo Native Mesh y sus paquetes descargables no son funciones de la skill de GitHub que analizamos aquí.

## ¿Qué genera img2threejs?

**img2threejs produce una especificación estructurada de la reconstrucción y código TypeScript que construye un objeto de Three.js.** El agente aporta el criterio visual; los scripts validan la especificación y controlan el avance entre etapas. La aplicación debe encargarse de mostrar y utilizar el modelo terminado.

La [arquitectura del flujo](https://github.com/img2threejs/img2threejs/blob/v2.0.1/docs/ARCHITECTURE.md) describe una secuencia de volúmenes iniciales, estructura, forma, materiales, detalle superficial, iluminación, interacción y optimización. El proceso funciona así:

1. El agente estudia la referencia y registra los rasgos visibles y las incertidumbres.
2. Describe las piezas, los materiales y sus relaciones en una especificación.
3. El código construye la etapa actual y el navegador la renderiza.
4. El agente compara el resultado con la referencia y corrige los problemas antes de avanzar.

El [generador de la función TypeScript](https://github.com/img2threejs/img2threejs/blob/v2.0.1/forge/stage3_build/generate_threejs_factory.py) inspeccionado deriva el nombre de la función del nombre del objeto. Esa función recibe un objeto de opciones y devuelve un `THREE.Group`; la especificación queda incorporada en su código. El archivo importa Three.js y módulos auxiliares, por lo que el modelo mantiene dependencias de ejecución.

## ¿Para qué sirve el TypeScript editable en una aplicación 3D?

**El TypeScript editable permite ver cómo está construido el objeto y modificar las piezas que necesita una configuración o una animación.** Compruébalo con una petición de cambio concreta antes de adoptar el flujo. Que el código sea legible no significa que ya tenga los controles que necesitas.

El generador expone mapas de componentes mediante `root.userData.sculptRuntime`. La [guía de jerarquía de ejecución](https://github.com/img2threejs/img2threejs/blob/v2.0.1/grimoire/readiness/action_rigging.md) explica los pivotes de movimiento, los puntos de anclaje o *sockets* y las descripciones de colisión. Una descripción de colisión no añade una simulación física a tu aplicación.

| Cambio necesario | Implementación que debes pedir | Qué comprobar antes de aceptarla |
| --- | --- | --- |
| Cambiar el color de la pantalla | Exponer el material correspondiente mediante un control de la aplicación | Las demás instancias de la lámpara conservan su color |
| Girar el cabezal | Definir un pivote con nombre, un eje y unos límites de movimiento acordados | La pantalla gira sobre su bisagra sin separarse del brazo |
| Cambiar la longitud del brazo | Modificar la especificación y regenerar, o añadir expresamente un parámetro geométrico | Las uniones y proporciones siguen correspondiendo a la variante deseada |
| Elegir una configuración que se pueda comprar | Conectar los controles de la escena con un estado validado de la aplicación | La combinación mostrada coincide con la variante guardada |

Las dimensiones arbitrarias no vienen expuestas como opciones de la función. Decide si los cambios futuros se harán en la especificación o en el TypeScript mantenido a mano. Regenerar desde una especificación antigua puede sobrescribir una corrección.

Después de revisar la función exportada, añade el objeto a tu `scene` existente. El nombre del archivo y el de la función de este ejemplo son ilustrativos:

```
import { createDeskLampModel } from "./generated/desk-lamp";

const lamp = createDeskLampModel({ castShadow: true });
scene.add(lamp);
```

Esto añade el objeto construido a la escena. La cámara, el renderizado, los controles y la liberación de recursos siguen siendo responsabilidad de la aplicación.

## ¿Cómo se instala img2threejs en un agente de programación?

**Instala la skill para un agente compatible y reinicia el agente.** La [guía de instalación](https://github.com/img2threejs/img2threejs/blob/v2.0.1/docs/INSTALL.md) indica macOS o Linux, Git, Node.js 18 o posterior y Python 3.10 o posterior. Las versiones también deben cumplir los requisitos de tu agente. El instalador revisado no admite Windows.

```
npx --yes img2threejs@latest install --host codex
npx --yes img2threejs@latest doctor
```

Sustituye `codex` por `claude`, `opencode` o `hermes` según el agente que uses. Hermes necesita el paso adicional de enlace al perfil descrito en la guía. `doctor` informa del estado de la instalación, no de la calidad del modelo. Si una skill existente no gestionada por el instalador bloquea el proceso, revisa su ruta antes de modificarla.

Los comandos siguen el procedimiento documentado; no los hemos ejecutado para este artículo. Guarda la versión y el commit de la skill que se instalen, porque `@latest` puede cambiar. El [manifiesto del paquete npm](https://github.com/img2threejs/img2threejs/blob/v2.0.1/package.json) identifica una CLI de instalación. Añadir el paquete a tu aplicación web no le proporciona una API para convertir imágenes.

## ¿Qué debes pedirle al agente que construya?

**Pide a img2threejs un objeto con piezas editables y deja claros los requisitos de revisión.** Los [criterios de idoneidad de la imagen](https://github.com/img2threejs/img2threejs/blob/v2.0.1/grimoire/intake/validation_rubric.md) favorecen siluetas claras y objetos identificables. Excluyen la extracción exacta de mallas y las dimensiones con precisión de fabricación.

Usa este encargo de prueba original con una imagen que tengas autorización para facilitar. Sustituye la altura ilustrativa de 400 mm por una medida real. Añade referencias laterales y traseras cuando esas superficies importen.

```
Usa la skill img2threejs instalada para ./reference.png.

Reconstruye la lámpara de escritorio como modelo procedural de Three.js en TypeScript.
Destino: un prototipo de producto interactivo en el navegador.
Fija una unidad de escena como un metro y una altura en posición neutra de 0.4 unidades.

Mantén identificables por separado la base, el brazo y la pantalla.
Asigna a la pantalla un pivote con nombre en la bisagra física.
Enumera las superficies y dimensiones inferidas antes de construirlas.
Pide otra vista si no puedes establecer un rasgo necesario.

Guarda la especificación de reconstrucción junto al código generado.
Identifica la función exportada y las opciones que realmente acepta.
Renderiza una vista ajustada a la referencia, otra lateral y otra trasera.
Muestra una vista sin texturas para que el material no oculte errores geométricos.

Demuestra un cambio de color de la pantalla y un movimiento de la bisagra.
Informa de defectos pendientes, dependencias y recursos o llamadas externos.
Detente para revisar si la interacción acordada necesita otro flujo de creación de recursos.
```

Comprueba la silueta y la bisagra antes de afinar la superficie. Una pasada de texturizado no corrige una bisagra mal situada. Guarda la especificación aceptada y el código en el mismo commit para que otro desarrollador pueda reproducir el cambio.

## ¿Cuándo conviene generar 3D procedural desde una imagen?

**Empezaríamos por un prototipo web cuyas piezas deban responder a las acciones del usuario.** Una lámpara ofrece un cambio concreto que comprobar. Verifica que la reconstrucción lo permite antes de encargar un catálogo de objetos similares.

| Uso previsto | Por qué evaluarlo | Qué cambia la decisión |
| --- | --- | --- |
| Prototipo interactivo de producto | Las piezas con nombre pueden facilitar la selección y el movimiento | Falta geometría necesaria para la interacción |
| Escena explicativa estilizada | Modificar el código permite expresar los rasgos necesarios para explicar un concepto | La aproximación transmite un mecanismo incorrecto |
| Primera versión de un configurador | Puedes probar cómo las opciones de producto afectan a la escena | La escena no representa de forma consistente las variantes válidas |
| Recurso con dimensiones críticas o deformaciones | Un prototipo puede ayudar a aclarar los requisitos | La aceptación exige precisión CAD, topología verificada o rigging especializado |

El [flujo de parecido de personajes](https://github.com/img2threejs/img2threejs/blob/v2.0.1/grimoire/character/likeness_maximization.md) puede proyectar imágenes de referencia sobre geometría procedural. Que la salida sea TypeScript no demuestra que el flujo prescinda de texturas. Revisa las dependencias del modelo generado.

La [arquitectura de plugins](https://github.com/img2threejs/img2threejs/blob/v2.0.1/docs/PLUGINS.md) separa el flujo básico de las extensiones especializadas. Los personajes siguen necesitando comprobaciones de rigging y deformación para que su jerarquía permita el movimiento previsto.

Si debes elegir un flujo completo para recursos de videojuegos, nuestra [comparativa de generadores 3D con IA para videojuegos](/es/blog/ai-3d-model-generators-game-development-2026/) trata la selección de herramientas, la topología y la integración en el motor.

## ¿Puedes exportar el resultado a GLB o Blender?

**Three.js puede exportar una escena a GLB; comprueba el resultado en Blender o en el destino previsto antes de aceptarlo.** La [referencia oficial de GLTFExporter](https://threejs.org/docs/pages/GLTFExporter.html) enumera los datos de escena y las extensiones compatibles. El archivo no conserva el programa TypeScript que construyó la escena.

Después de importar, revisa los materiales, la animación y la escala. Los shaders personalizados y la lógica de aplicación necesitan un tratamiento específico. Conserva el código junto al archivo exportado. Un GLB se puede editar con herramientas adecuadas; el código procedural ofrece otra forma de mantener el modelo.

El [plugin opcional img2glb](https://github.com/img2threejs/plugin-img2glb/blob/main/SKILL.md) documenta la generación de mallas a partir de imágenes mediante TRELLIS alojado, con sus propios requisitos de red y dependencias. Ese flujo crea una malla desde la imagen; no exporta el resultado de tu función procedural.

## ¿Cómo compruebas un modelo generado antes de publicarlo?

**Prueba la salida de img2threejs en la aplicación de destino con la acción que debe realizar el usuario.** Una vista que coincide con la referencia puede ocultar una parte trasera o un pivote incorrectos. La [guía de autocorrección](https://github.com/img2threejs/img2threejs/blob/v2.0.1/grimoire/review/self_correction.md) del proyecto también advierte que superar una comparación bidimensional no basta para demostrar realismo tridimensional.

Estas comprobaciones son una propuesta, no resultados obtenidos. Acuerda los dispositivos y límites de rendimiento antes de empezar. Después registra lo observado y los defectos pendientes.

| Comprobación | Ejercicio | Evidencia que conservar |
| --- | --- | --- |
| Forma y escala | Comparar la vista de referencia, la lateral y la trasera; verificar la altura acordada | Capturas identificadas, resultado de la medición y lista de zonas inferidas |
| Geometría editable | Cambiar una dimensión del brazo en la fuente elegida para mantener el modelo | Un diff revisable y un modelo cuyas uniones sigan alineadas |
| Materiales independientes | Mostrar dos instancias de la lámpara y cambiar el color de una sola pantalla | La segunda instancia permanece sin cambios |
| Movimiento de piezas | Mover el cabezal por todo el recorrido previsto | Eje de bisagra correcto e intersecciones o límites documentados |
| Estado del producto | Seleccionar, guardar y volver a cargar una configuración | Los controles y la escena muestran la misma variante válida |
| Rendimiento en el dispositivo | Cargar e interactuar en el dispositivo compatible de menor rendimiento | Tiempo de arranque, tiempo por fotograma, draw calls y memoria frente a los límites acordados |
| Ciclo de vida | Entrar, salir y volver a abrir el visualizador varias veces | No se acumulan recursos de GPU propios de la aplicación ni controles duplicados |
| Alternativa sin 3D | Usar los controles con teclado y desactivar la visualización 3D | La información del producto y la configuración siguen siendo utilizables |

La [guía de liberación de recursos de Three.js](https://threejs.org/manual/pages/cleanup.html) explica que hay que liberar expresamente las geometrías, los materiales y las texturas que ya no se usan. Quitar un objeto de la escena no basta. Controla quién utiliza cada recurso para no liberar uno que otro modelo todavía necesita.

Incluye estas comprobaciones en tu [QA para código generado por IA](/es/blog/qa-for-ai-generated-code/). La aprobación de la geometría puede pasar por alto un fallo al guardar la configuración; una compilación TypeScript correcta puede pasar por alto una forma equivocada.

## ¿Cuánto cuesta trabajar con img2threejs?

**Presupuesta el uso del agente, los intentos descartados y el trabajo para integrar un recurso aceptado.** El [documento de coste en tokens](https://github.com/img2threejs/img2threejs/blob/v2.0.1/docs/TOKEN_COST.md) califica sus cifras como estimaciones de ingeniería. No las usaríamos como presupuesto de producción.

Registra el resultado de la prueba, el uso del agente, los minutos de trabajo humano y los defectos pendientes. Compara ese conjunto con tu flujo de modelado actual. Valora la fidelidad según el uso previsto: un prototipo y un catálogo para clientes tienen criterios de aceptación distintos.

Que los archivos sean locales no determina dónde procesa las imágenes tu agente. Antes de facilitar referencias confidenciales del producto, comprueba qué agente y endpoint procesarán las imágenes y qué llamadas realizarán los plugins opcionales.

## ¿Cuándo usaríamos img2threejs?

**Prueba img2threejs cuando las piezas editables sean importantes para tu prototipo web y el equipo pueda revisar la reconstrucción.** Empieza con un objeto y una interacción útil. Mantén el flujo si su código facilita implementar y verificar el siguiente cambio aprobado.

Nuestra [guía para llevar un prototipo creado con IA a producción](/es/software-development-guide/vibe-coded-prototype-to-production/) ayuda a definir esa transición. El [caso de Hyperstate AI](/es/case-studies/hyperstate-ai/) muestra experiencia relacionada con aplicaciones de IA; no documenta trabajo con img2threejs ni modelado 3D.

Para un visualizador o configurador real, el punto de partida es nuestro [servicio de desarrollo 3D interactivo](/es/services/interactive-3d-development/). [Cuéntanos qué producto quieres mostrar, sus interacciones y los dispositivos de destino](/es/contact/?intent=interactive-3d-development) para que la prueba tenga una decisión de aceptación clara.

## Preguntas sobre img2threejs

### ¿img2threejs es un modelo de IA independiente?

No. El proyecto revisado aporta una skill para agentes, scripts de apoyo y un flujo de reconstrucción procedural. Tu agente de programación proporciona el razonamiento del modelo y el criterio visual. Evalúa el agente y el flujo conjuntamente, y registra las versiones de ambos para poder repetir un resultado aceptado.

### ¿Necesitas una GPU local?

La guía de instalación básica no exige una GPU local de inferencia. Los requisitos dependen de dónde se ejecute el modelo de tu agente y de cómo renderices la escena. Un modelo local o un backend opcional pueden añadir requisitos propios. También debes probar el rendimiento del navegador en el dispositivo de tu público.

### ¿img2threejs genera un componente de React Three Fiber?

La salida básica es una función TypeScript que devuelve un Group de Three.js, no un componente React generado automáticamente. React Three Fiber admite objetos existentes mediante su [integración con primitive](https://r3f.docs.pmnd.rs/api/objects), que no libera automáticamente el objeto adjunto. Define cómo se vincula el estado y quién gestiona los recursos; después prueba el montaje y desmontaje en tu aplicación.

### ¿img2threejs recupera la parte oculta de un objeto?

Una fotografía no permite determinar las superficies que no muestra. Trata los detalles ocultos como inferencias, aporta más vistas cuando importen e inspecciona el resultado desde esos ángulos. Si necesitas una representación exacta del producto, utiliza referencias medidas y recursos adecuados, en lugar de aceptar una parte trasera inventada porque el frente resulta convincente.

### ¿Sigues necesitando Blender o un artista 3D?

Un prototipo web revisado puede mantenerse directamente en TypeScript. Si necesitas controlar la topología, esculpir detalles, deformar el modelo o seguir un flujo de exportación concreto, puede seguir haciendo falta un especialista 3D y herramientas de autoría adecuadas. Prueba un recurso representativo antes de cambiar el proceso de producción del equipo.

### ¿Puedes usar el código fuente de img2threejs en proyectos comerciales?

El repositorio revisado utiliza la [licencia Apache-2.0](https://github.com/img2threejs/img2threejs/blob/v2.0.1/LICENSE). Conserva los avisos aplicables y revisa las condiciones de las dependencias y los servicios de modelos. La licencia del software no acredita permiso para reproducir cualquier fotografía, marca o diseño representado; registra los permisos correspondientes al recurso que vayas a utilizar.

Arquitectura y plataformas

## Qué leer después

Decisiones de frameworks, plataformas y sistemas con impacto a largo plazo.

[Empieza aquí**Arquitectura Smart City: MQTT, LoRaWAN, Kubernetes y Terraform**](/es/blog/smart-city-architecture-best-practices-2026/)

- [Organoid: IA para fichas técnicas de materiales](/es/blog/organoid-ai-material-specification-opportunities/)
- [ING-B: IA para revisar documentos eléctricos](/es/blog/ing-b-ai-electrical-engineering-opportunities/)
- [Odoo y n8n: crear pedidos sin duplicarlos al reintentar](/es/blog/odoo-n8n-idempotency-recovery/)
- [HubSpot y Odoo: ¿quién puede modificar los datos del cliente?](/es/blog/hubspot-odoo-customer-data-ownership/)
- [Presupuestos de Odoo desde correo y PDF: revisa productos y precios](/es/blog/odoo-email-pdf-quotation-review/)

[Artículo siguiente**Organoid: IA para fichas técnicas de materiales**](/es/blog/organoid-ai-material-specification-opportunities/)

[**Volver**](/es/blog/overview/)

[![Kevin Riedl](/img/team/kevin.webp)](/es/team/kevin-riedl/)

[Kevin Riedl](/es/team/kevin-riedl/) https://linkedin.com/in/wsdt

13 min de lectura · 7 de noviembre de 2026 Última revisión 7 de noviembre de 2026

[**Siguiente**](/es/blog/ai-3d-model-generators-game-development-2026/)