Image to 3D Pipeline

Transformez une image 2D en modèle 3D animé prêt pour le web ou le jeu en moins de 30 minutes, en utilisant le workflow Dilum Sanjaya (Hunyuan3D + Mixamo).

When to Use This Skill

• Créer un personnage 3D pour un site web - Mascotte, avatar, illustration interactive

• Prototyper un asset de jeu - Character design, props, environnements

• Produire du contenu marketing 3D - Produits rotatifs, personnages animés

• Convertir des illustrations existantes - Logo, mascotte, character design → 3D

• Tester une idée rapidement - Prototype 3D en 30 minutes au lieu de jours

Methodology Foundation

Source: Dilum Sanjaya (@DilumSanjaya) - Game Character Pipeline (2025-2026)

Core Principle: "L'image 2D est votre blueprint. Hunyuan3D génère le mesh, Mixamo ajoute le rig automatiquement. En 30 minutes, vous avez un personnage animé utilisable dans Three.js ou Unity."

Why This Matters: Traditionnellement, passer d'un concept 2D à un modèle 3D riggé prenait des jours de travail de modélisation. Ce workflow réduit le temps à moins d'une heure tout en produisant des assets de qualité suffisante pour la production.

What Claude Does vs What You Decide

Claude Does You Decide

Structures video workflow Final creative vision

Suggests shot compositions Equipment selection

Creates storyboard templates Brand aesthetics

Generates script frameworks Final approval

Identifies technical requirements Budget allocation

What This Skill Does

• Guide le choix de l'outil 3D - Hunyuan3D vs Tripo vs Meshy selon le use case

• Structure le workflow complet - De l'image source au modèle exporté

• Optimise le mesh généré - Réduction de polygones, correction de textures

• Automatise le rigging - Configuration Mixamo pour personnages

• Prépare l'export - Formats GLB/FBX selon la destination

How to Use

Convertir un character design en personnage 3D animé

J'ai cette image de personnage [joindre image]. Aide-moi à la convertir en modèle 3D animé avec le skill image-to-3d-pipeline.

Créer un produit 3D rotatif

Je veux créer un modèle 3D de mon produit [description] à partir de photos. Guide-moi avec le pipeline image-to-3d.

Prototyper une mascotte de marque

Voici le design de notre mascotte [image]. Je veux la transformer en 3D pour notre site web avec des animations idle.

Instructions

Quand vous aidez à convertir une image 2D en 3D, suivez ce processus :

Step 1: Évaluer l'image source

Analyse de l'Image Source

Type d'image: [ ] Character design / Personnage [ ] Objet / Produit [ ] Illustration / Logo [ ] Photo réelle

Qualité pour conversion 3D: [ ] ✅ Vue frontale claire [ ] ✅ Fond simple ou transparent [ ] ✅ Couleurs/textures distinctes [ ] ✅ Proportions cohérentes [ ] ⚠️ Détails complexes (peut perdre en conversion)

Complexité estimée: [ ] Simple - Forme géométrique basique [ ] Moyenne - Personnage ou objet organique [ ] Complexe - Détails fins, accessoires multiples

Points clés:

• Les vues frontales donnent de meilleurs résultats

• Les fonds transparents/blancs simplifient le traitement

• Les personnages avec membres distincts se riggent mieux

Step 2: Choisir l'outil de conversion

Outil Forces Idéal pour Limitations

Hunyuan3D Meilleure texture, open source Personnages, objets détaillés Cleanup parfois nécessaire

Tripo AI UX simple, rigging auto Prototypes rapides Moins de contrôle

Meshy Bon pour stylisé Assets cartoon/low-poly Textures moins réalistes

Rodin Gen-1 Vitesse, topology game-ready Game assets Moins de fidélité

CSM Multi-view consistency Objets complexes Plus lent

Recommandation par use case:

• Personnage pour web → Hunyuan3D + Mixamo

• Prototype rapide → Tripo AI

• Asset jeu stylisé → Meshy ou Rodin

• Produit réaliste → Hunyuan3D + post-processing

Step 3: Pipeline de conversion

Pipeline Standard (Hunyuan3D)

A. Préparation de l'image

1. Supprimer le fond (remove.bg ou outil intégré)
2. Recadrer serré sur le sujet
3. Résolution recommandée: 1024x1024 minimum
4. Sauvegarder en PNG (préserver transparence)

B. Génération 3D

1. Uploader sur Hunyuan3D (hunyuan3d.tencent.com)
2. Sélectionner mode: "Image to 3D"
3. Paramètres recommandés:
   • Quality: High
   • Texture: Enable
   • Multi-view: Enable (si disponible)
4. Générer et télécharger (GLB ou OBJ)

C. Validation du mesh

• Ouvrir dans Blender ou viewer en ligne
• Vérifier: topology, textures, scale
• Identifier problèmes: trous, textures manquantes

Step 4: Optimisation et nettoyage

Checklist Optimisation

Mesh

[ ] Poly count acceptable (< 50k pour web, < 100k pour jeu) [ ] Pas de faces inversées [ ] Pas de vertices orphelins [ ] Mesh manifold (étanche)

Textures

[ ] UV map correcte [ ] Résolution appropriée (1024x1024 ou 2048x2048) [ ] Pas de stretching visible [ ] Couleurs fidèles à l'original

Scale

[ ] Proportions correctes [ ] Orientation (Y-up ou Z-up selon destination) [ ] Centré sur origin

Outils de cleanup:

• Blender (gratuit) - Decimate modifier, texture paint

• Meshlab (gratuit) - Réparation automatique

• gltf-transform (CLI) - Optimisation GLB pour web

Step 5: Rigging avec Mixamo (personnages uniquement)

Workflow Mixamo

1. Exporter le mesh en FBX (sans textures embarquées)
2. Uploader sur mixamo.com
3. Positionner les markers:
   • Chin
   • Wrists
   • Elbows
   • Knees
   • Groin
4. Sélectionner "Auto-Rig"
5. Choisir animations:
   • Idle (standing, breathing)
   • Walk
   • Run
   • Autres selon besoin
6. Télécharger en FBX avec skin

Animations recommandées pour web:

• Idle

• Animation de base

• Walking

• Pour déplacements

• Waving

• Interaction

• Talking

• Si voix-off

Step 6: Export et intégration

Destination Format Notes

Three.js / Web GLB Format recommandé, embedde textures

Unity FBX Import natif, configurer materials

Unreal FBX Nécessite skeleton retargeting

React Three Fiber GLB Utiliser gltfjsx pour composant

Optimisation GLB pour web (gltf-transform)

npx @gltf-transform/cli optimize input.glb output.glb --compress draco

Taille cible:

• Hero 3D (première chose visible): < 2MB

• Asset secondaire: < 500KB

• Personnage animé: < 5MB

Examples

Example 1: Personnage de jeu - Character Selection Screen

Input: Concept art de personnage (style cartoon)

Process:

• Nano Banana → Génération character sheet cohérent

• Hunyuan3D → Conversion en mesh 3D

• Blender → Cleanup rapide (5 min)

• Mixamo → Auto-rig + animations idle/select

• Three.js → Intégration avec rotation au survol

Output: Personnage 3D interactif avec 3 animations Temps total: ~45 minutes

Code Three.js basique:

import { useGLTF, useAnimations } from '@react-three/drei'

function Character({ url }) { const { scene, animations } = useGLTF(url) const { actions } = useAnimations(animations, scene)

useEffect(() => { actions['idle']?.play() }, [])

return <primitive object={scene} /> }

Example 2: Mascotte de marque pour landing page

Input: Illustration 2D de mascotte entreprise

Process:

• Cleanup fond (remove.bg)

• Hunyuan3D → Mesh 3D avec textures

• Pas de rigging (statique)

• Export GLB optimisé

• Spline ou Three.js → Animation CSS/JS simple (rotation, bounce)

Output: Mascotte 3D tournante en hero section Temps total: ~20 minutes

Example 3: Produit e-commerce 360°

Input: 4 photos du produit (face, dos, côtés)

Process:

• CSM → Multi-view reconstruction (meilleur pour objets)

• Cleanup Blender → Simplifier geometry

• Bake textures hautes résolution

• Export GLB

• model-viewer → Viewer 3D responsive

Output: Viewer 3D interactif avec zoom/rotation Temps total: ~1 heure

Code model-viewer:

<model-viewer src="product.glb" ar auto-rotate camera-controls shadow-intensity="1"

</model-viewer>

Checklists & Templates

Checklist Pré-Conversion

Image Source

[ ] Résolution suffisante (min 1024x1024) [ ] Fond transparent ou uniforme [ ] Sujet bien délimité [ ] Style cohérent (pas de mix photo/illustration)

Objectif

[ ] Destination claire (web/jeu/vidéo) [ ] Poly budget défini [ ] Animations nécessaires identifiées [ ] Format d'export choisi

Template Brief 3D

Brief Conversion 2D → 3D

Image source: [joindre] Type: [ ] Personnage [ ] Objet [ ] Logo [ ] Autre

Destination finale:

• Plateforme: _______________
• Interaction: [ ] Statique [ ] Rotation [ ] Animation complète
• Taille max: ___ MB

Style souhaité:

• Fidèle à l'original
• Stylisé/Low-poly
• Réaliste

Animations (si personnage):

• Idle
• Walk
• Autres: _______________

Contraintes:

Tool Comparison Matrix

Critère Hunyuan3D Tripo AI Meshy Rodin CSM

Qualité texture ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐

Vitesse ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐

Facilité ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐

Cleanup requis Moyen Faible Faible Faible Moyen

Prix Gratuit Freemium Freemium Payant Freemium

Best for Personnages Prototypes Stylisé Jeux Multi-view

Troubleshooting

Problème Cause probable Solution

Mesh "explosé" Fond non transparent Retirer le fond avant upload

Textures manquantes Export sans embedde Re-exporter avec textures packées

Rigging échoue Pose non T-pose Modifier pose dans Blender avant Mixamo

Fichier trop lourd Trop de polygones Utiliser Decimate modifier

Animations saccadées FPS incompatible Re-exporter à 30fps

Skill Boundaries

What This Skill Does Well

• Structuring video production workflows

• Creating storyboard frameworks

• Suggesting technical approaches

• Providing creative direction templates

What This Skill Cannot Do

• Replace professional videography

• Edit video files directly

• Make final creative judgments

• Guarantee audience engagement

References

Outils

• Hunyuan3D - Tencent, gratuit

• Tripo AI - Freemium

• Meshy - Freemium

• Mixamo - Adobe, gratuit

• gltf-transform - CLI optimisation

Tutorials

• Dilum Sanjaya: Character to 3D workflows (X/Twitter)

• Three.js Fundamentals: Loading 3D models

• React Three Fiber: useGLTF documentation

Research

• docs/research-ai-design-workflows-2026-01.md
• Deep research 75+ sources

Related Skills

• character-design-ai/

• Générer des images de personnages cohérentes (input pour ce skill)

• vibe-coding-design/

• Méthodologie itérative rapide

• ai-ui-generation/

• Intégrer le 3D dans une interface générée

Skill version: 1.0 Last updated: 2026-01-28 Category: ai-design