Comment Transformer une Image en Code Three.js Propre Sans Maillages Lourds ni Réseau de Neurones

La plupart des générateurs 3D à partir d'images produisent des binaires lourds. Le résultat est un maillage dense de centaines de milliers de polygones, des textures cuites floues, et aucun moyen de modifier manuellement quoi que ce soit dans le code. Si vous avez besoin d'un modèle simple pour l'interactivité d'un site web ou d'une scène légère dans le navigateur, vous ne voulez pas charger un fichier GLTF de cinq mégaoctets juste pour un seul objet.

Le projet img2threejs a abordé le problème sous un angle différent. Au lieu de la photogrammétrie et de l'export de maillage polygonal, il analyse l'image et génère du code TypeScript procédural pour Three.js. Le modèle est assemblé à l'exécution à partir de primitives de base, de shaders et de courbes mathématiques.

Ce qui se cache sous le capot

Le concept central est simple : le modèle généré devrait être du code source plutôt qu'un actif binaire lourd. Vous fournissez au script une seule photo ou œuvre d'art, et vous obtenez en retour une fonction factory createObjectNameModel() qui renvoie un THREE.Group classique.

À l'intérieur de cet objet, la hiérarchie des nœuds est déjà définie :

• Points de rotation (pivots) et socles pour fixer des éléments.
• Colliders pour la gestion des clics et la physique.
• Une méthode update en userData.tick pour l'animation continue en arrière-plan.
• Matériaux procéduraux qui réagissent à l'éclairage de la scène plutôt que d'être cuits.

Le code est organisé en couches claires. Vous pouvez l'ouvrir dans un éditeur, ajuster un rayon de congé, changer la rugosité métallique, ou réécrire la logique d'animation en quelques minutes.

Pourquoi le LLM ne devient pas fou face à la consommation de tokens

Si vous forcez un modèle de langage à écrire une scène Three.js à partir d'une image, il va rapidement épuiser tout le contexte en essayant de deviner les coordonnées à l'aveugle. Les créateurs de img2threejs ont divisé le travail entre des scripts déterministes et des agents de vision neuronale comme Claude Code ou Codex.

Tout le travail routinier est déchargé vers un pipeline local en Python 3.10 pur sans dépendances externes. Pas de bibliothèques lourdes comme Pillow ou PyTorch : l'analyse PNG et les calculs de couleur fonctionnent grâce aux modules standards struct et zlib.

Les scripts gèrent la mécanique :

• Découper la référence en zones de matériaux et analyser la palette de couleurs avec la formule CIEDE2000.
• Construire une spécification d'objet intermédiaire ObjectSculptSpec.
• Valider les dimensions des composants et le blocage de l'assemblage jusqu'à la génération de code si la description manque d'éléments clés.
• Assembler une liste de vérification comparative (original côte à côte avec le rendu actuel).

Le modèle dépense ses tokens exclusivement pour la prise de décision : il regarde l'image de rendu appariée et dit si l'étape actuelle a passé la validation ou si la géométrie doit être ajustée.

L'assemblage suit des étapes strictes : de l'ébauche brute à la structure, puis à la forme, aux matériaux, à l'éclairage et à l'optimisation finale. Si le modèle essaie de tricher et de dessiner quelque chose avec une texture qui devrait être une géométrie honnête, la validation interne rejette le passage et renvoie le code pour correction.

Ce que le système peut accomplir en pratique

Le dépôt contient une galerie avec des exemples en direct où vous pouvez faire pivoter chaque objet dans le navigateur et visualiser immédiatement le code TypeScript généré.

Les démos incluent des skins d'armes détaillés de CS2, un vélo BMX, des écouteurs dans un étui de chargement et un diorama de maison isométrique. L'outil excelle particulièrement avec les objets à surfaces dures. Les petits congés, les découpes de vis, les joints de panneaux et les transitions du plastique mat au brillant se décomposent en primitives avec une grande précision.

Une branche de génération distincte est conçue pour les personnages et les animaux. Le script marque les points d'ancrage de l'anatomie faciale et les proportions du corps, en essayant de préserver la reconnaissabilité de la silhouette, bien que vous ne deviez pas vous attendre à un scan humain photoréaliste en sortie.

Comment exécuter et tester

La méthode d'intégration la plus rapide consiste à ajouter le projet comme compétence pour Claude Code ou Codex. Clonez simplement le dépôt dans le dossier de travail de l'agent :

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

Après cela, vous pouvez joindre une image dans le chat de l'agent et invoquer la commande :

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

Si vous souhaitez exécuter les étapes manuellement via le terminal, les scripts sont lancés directement depuis le répertoire 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 sortie, vous obtenez un fichier createMyModel.ts prêt et un manifeste JSON avec tous les paramètres de construction.

Limitations honnêtes

Les auteurs du projet sont transparents sur les limites d'applicabilité. À partir d'une seule photo, il est impossible de reconstruire à 100% les côtés cachés d'un objet. Si la référence ne montre pas l'arrière de l'article, le système reflète soit la géométrie avant soit fait une supposition prudente, en marquant la zone comme faible détail.

L'outil ne remplacera pas un modélisateur 3D professionnel pour créer des personnages AAA complexes avec du rigging. Sa niche est la génération rapide d'éléments interactifs, d'environnements, de widgets et de dioramas où le poids du bundle zéro et la lisibilité complète du code sont essentiels.

Résumé

Le projet mérite définitivement un signet pour les développeurs web et les créateurs de jeux indie utilisant Three.js. Si vous êtes fatigué d'assembler manuellement des actifs 3D simples à partir de cubes et de cylindres ou de charger des maillages lourds sur les pages d'atterrissage, l'approche img2threejs fait gagner des heures de travail routinier. Vous obtenez du code léger et extensible qui s'intègre parfaitement dans un frontend typé.