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