Cómo Convertir una Imagen en Código Limpio para Three.js Sin Mallas Pesadas ni Basura de Redes Neuronales

La mayoría de generadores 3D a partir de imágenes generan binarios pesados. El resultado es una malla densa de cientos de miles de polígonos, texturas horneadas difusas y ninguna forma de ajustar manualmente nada en el código. Si necesitas un modelo simple para interactividad en un sitio web o una escena ligera en el navegador, no quieres cargar un archivo GLTF de cinco megabytes solo para un objeto.

El proyecto img2threejs abordó el problema desde un ángulo diferente. En lugar de fotogrametría y exportación de mallas de polígonos, analiza la imagen y genera código TypeScript procedural para Three.js. El modelo se ensambla en tiempo de ejecución a partir de primitivas básicas, shaders y curvas matemáticas.

¿Qué hay bajo el capó?

El concepto central es sencillo: el modelo generado debe ser código fuente en lugar de un activo binario pesado. Le pasas al script una sola foto o ilustración y obtienes de vuelta una función factory createObjectNameModel() que devuelve un THREE.Group normal.

Dentro de este objeto, la jerarquía de nodos ya está definida:

• Puntos de rotación (pivotes) y sockets para adjuntar elementos.
• Colliders para manejo de clics y física.
• Un método update en userData.tick para animación continua en segundo plano.
• Materiales procedurales que responden a la iluminación de la escena en lugar de estar horneados.

El código está organizado en capas claras. Puedes abrirlo en un editor, ajustar un radio de redondeo, cambiar la rugosidad metálica o reescribir la lógica de animación en un par de minutos.

¿Por qué el LLM no enloquece por el consumo de tokens?

Si obligas a un modelo de lenguaje a escribir una escena Three.js desde cero basándose en una imagen, rápidamente quemará todo el contexto intentando adivinar coordenadas a ciegas. Los creadores de img2threejs dividieron el trabajo entre scripts determinísticos y agentes de visión de redes neuronales como Claude Code o Codex.

Todo el trabajo rutinario se descarga a una pipeline local en Python 3.10 puro sin dependencias externas. Sin bibliotecas pesadas como Pillow o PyTorch: el análisis de PNG y la matemática de colores funcionan a través de los módulos estándar struct y zlib.

Los scripts manejan la mecánica:

• Dividen la referencia en zonas de materiales y analizan la paleta de colores usando la fórmula CIEDE2000.
• Construyen una especificación intermedia del objeto ObjectSculptSpec.
• Validan las dimensiones de los componentes y bloquean el ensamblaje hasta la generación de código si la descripción carece de elementos clave.
• Ensamblan una lista de verificación comparativa (original junto con la renderización actual).

El modelo gasta tokens exclusivamente en la toma de decisiones: mira la imagen renderizada emparejada y dice si el paso actual pasó la validación o si la geometría necesita ajustes.

El ensamblaje sigue etapas estrictas: desde borrador aproximado a estructura, luego a forma, materiales, iluminación y optimización final. Si el modelo intenta hacer trampa y dibujar algo con una textura que debería ser geometría honesta, la validación interna rechaza el paso y envía el código de vuelta para corrección.

¿Qué puede hacer el sistema en la práctica?

El repositorio tiene una galería con ejemplos en vivo donde puedes rotar cada objeto en el navegador y ver inmediatamente el código TypeScript generado.

Las demos incluyen skins de armas detalladas de CS2, una bicicleta BMX, auriculares en su estuche de carga y una maqueta isométrica de una casa. La herramienta destaca particularmente con objetos de superficie dura. Pequeños biseles, cortes de tornillos, juntas de paneles y transiciones de plástico mate a brillante se descomponen en primitivas con alta precisión.

Una rama de generación separada está diseñada para personajes y animales. El script marca puntos de anclaje de anatomía facial y proporciones corporales, intentando preservar el reconocimiento de la silueta, aunque no deberías esperar un escaneo humano fotorrealista en la salida.

¿Cómo ejecutar y probarlo?

El método de integración más rápido es agregar el proyecto como una skill para Claude Code o Codex. Solo clona el repositorio en la carpeta de trabajo del agente:

git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

Después de eso, puedes adjuntar una imagen en el chat del agente e invocar el comando:

/img2threejs Собери этот предмет в виде модели Three.js, сохрани пропорции и цвета.

Si quieres ejecutar los pasos manualmente a través de la terminal, los scripts se lanzan directamente desde el directorio forge:

python3 forge/stage1_intake/probe_image.py reference.png
python3 forge/stage2_spec/new_pre_spec_assessment.py "MyModel" --image reference.png --out assessment.json
python3 forge/stage2_spec/new_sculpt_spec.py "MyModel" --image reference.png --assessment assessment.json --out spec.json
python3 forge/stage2_spec/validate_sculpt_spec.py spec.json --strict-quality
python3 forge/stage3_build/generate_threejs_factory.py spec.json --out src/createMyModel.ts

En la salida, obtienes un archivo createMyModel.ts listo y un manifiesto JSON con todos los parámetros de construcción.

Limitaciones honestas

Los autores del proyecto son claros sobre los límites de aplicabilidad. Desde una sola foto, es imposible reconstruir al 100% los lados ocultos de un objeto. Si la referencia no muestra la parte trasera del artículo, el sistema ya sea refleja la geometría frontal o hace una suposición cuidadosa, marcando el área como de bajo detalle.

La herramienta no reemplazará a un modelador 3D profesional para crear personajes AAA complejos con rig. Su nicho es la generación rápida de elementos interactivos, entornos, widgets y maquetas donde el peso del bundle cero y la legibilidad completa del código son críticos.

Resumen

El proyecto definitivamente merece un marcador para desarrolladores web y creadores de juegos indie que usan Three.js. Si estás cansado de ensamblar manualmente activos 3D simples desde cubos y cilindros o cargar mallas pesadas en páginas de destino, el enfoque de img2threejs ahorra horas de trabajo rutinario. Obtienes código ligero y extensible que encaja perfectamente en un frontend tipado.