En este artículo
img2threejs: de una imagen a código Three.js editable
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 explica ese planteamiento.
Fuentes comprobadas: . 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. 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 describe una secuencia de volúmenes iniciales, estructura, forma, materiales, detalle superficial, iluminación, interacción y optimización. El proceso funciona así:
- El agente estudia la referencia y registra los rasgos visibles y las incertidumbres.
- Describe las piezas, los materiales y sus relaciones en una especificación.
- El código construye la etapa actual y el navegador la renderiza.
- El agente compara el resultado con la referencia y corrige los problemas antes de avanzar.
El generador de la función TypeScript 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 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 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 doctorSustituye 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 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 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 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 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 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 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 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 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 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. 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 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 ayuda a definir esa transición. El caso de 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. Cuéntanos qué producto quieres mostrar, sus interacciones y los dispositivos de destino para que la prueba tenga una decisión de aceptación clara.