image-to-3d-pipeline

Image to 3D Pipeline

Turn a 2D image into an animated 3D model ready for the web or a game in under 30 minutes, using the Dilum Sanjaya workflow (Hunyuan3D + Mixamo).

When to Use This Skill

Create a 3D character for a website - Mascot, avatar, interactive illustration
Prototype a game asset - Character design, props, environments
Produce 3D marketing content - Rotating products, animated characters
Convert existing illustrations - Logo, mascot, character design → 3D
Test an idea quickly - 3D prototype in 30 minutes instead of days

Methodology Foundation

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

Core Principle: "The 2D image is your blueprint. Hunyuan3D generates the mesh, Mixamo adds the rig automatically. In 30 minutes, you have an animated character usable in Three.js or Unity."

Why This Matters: Traditionally, going from a 2D concept to a rigged 3D model took days of modeling work. This workflow reduces the time to less than an hour while producing assets of sufficient quality for 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

Guides the choice of 3D tool - Hunyuan3D vs Tripo vs Meshy depending on the use case
Structures the complete workflow - From source image to exported model
Optimizes the generated mesh - Polygon reduction, texture correction
Automates rigging - Mixamo setup for characters
Prepares the export - GLB/FBX formats depending on the destination

How to Use

Convert a character design into an animated 3D character

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

Create a rotating 3D product

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

Prototype a brand mascot

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

Instructions

When you help convert a 2D image to 3D, follow this process:

Step 1: Evaluate the source image

## 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

Key points:

Front views give better results
Transparent/white backgrounds simplify processing
Characters with distinct limbs rig better

Step 2: Choose the conversion tool

Tool	Strengths	Ideal for	Limitations
Hunyuan3D	Best texture, open source	Characters, detailed objects	Cleanup sometimes necessary
Tripo AI	Simple UX, auto rigging	Rapid prototypes	Less control
Meshy	Good for stylized	Cartoon/low-poly assets	Less realistic textures
Rodin Gen-1	Speed, game-ready topology	Game assets	Less fidelity
CSM	Multi-view consistency	Complex objects	Slower

Recommendation by use case:

Character for web → Hunyuan3D + Mixamo
Rapid prototype → Tripo AI
Stylized game asset → Meshy or Rodin
Realistic product → Hunyuan3D + post-processing

Step 3: Conversion pipeline

## 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: Optimization and cleanup

## 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

Cleanup tools:

Blender (free) - Decimate modifier, texture paint
Meshlab (free) - Automatic repair
gltf-transform (CLI) - GLB optimization for web

Step 5: Rigging with Mixamo (characters only)

## 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

Recommended animations for web:

Idle - Basic animation
Walking - For movement
Waving - Interaction
Talking - If voice-over

Step 6: Export and integration

Destination	Format	Notes
Three.js / Web	GLB	Recommended format, embedded textures
Unity	FBX	Native import, configure materials
Unreal	FBX	Requires skeleton retargeting
React Three Fiber	GLB	Use gltfjsx for component

# Optimisation GLB pour web (gltf-transform)
npx @gltf-transform/cli optimize input.glb output.glb --compress draco

Target size:

Hero 3D (first thing visible): < 2MB
Secondary asset: < 500KB
Animated character: < 5MB

Examples

Example 1: Game character - Character Selection Screen

Input: Character concept art (cartoon style)

Process:

Nano Banana → Coherent character sheet generation
Hunyuan3D → Conversion to 3D mesh
Blender → Quick cleanup (5 min)
Mixamo → Auto-rig + idle/select animations
Three.js → Integration with rotation on hover

Output: Interactive 3D character with 3 animations Total time: ~45 minutes

Basic Three.js code:

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: Brand mascot for landing page

Input: 2D illustration of company mascot

Process:

Background cleanup (remove.bg)
Hunyuan3D → 3D mesh with textures
No rigging (static)
Optimized GLB export
Spline or Three.js → Simple CSS/JS animation (rotation, bounce)

Output: Rotating 3D mascot in hero section Total time: ~20 minutes

Example 3: 360° e-commerce product

Input: 4 product photos (front, back, sides)

Process:

CSM → Multi-view reconstruction (best for objects)
Blender cleanup → Simplify geometry
Bake high-resolution textures
Export GLB
model-viewer → Responsive 3D viewer

Output: Interactive 3D viewer with zoom/rotation Total time: ~1 hour

model-viewer code:

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

Checklists & Templates

Pre-Conversion Checklist

## 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

3D Brief Template

## 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

Criterion	Hunyuan3D	Tripo AI	Meshy	Rodin	CSM
Texture quality	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Speed	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
Ease of use	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
Cleanup required	Medium	Low	Low	Low	Medium
Price	Free	Freemium	Freemium	Paid	Freemium
Best for	Characters	Prototypes	Stylized	Games	Multi-view

Troubleshooting

Problem	Probable cause	Solution
"Exploded" mesh	Non-transparent background	Remove background before upload
Missing textures	Export without embedding	Re-export with packed textures
Rigging fails	Pose is not T-pose	Modify pose in Blender before Mixamo
File too heavy	Too many polygons	Use Decimate modifier
Choppy animations	Incompatible FPS	Re-export at 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

Tools

Hunyuan3D - Tencent, free
Tripo AI - Freemium
Meshy - Freemium
Mixamo - Adobe, free
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/ - Generate consistent character images (input for this skill)
vibe-coding-design/ - Fast iterative methodology
ai-ui-generation/ - Integrate 3D into a generated interface

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

About this skill

When to Use This Skill

Methodology Foundation

What Claude Does vs What You Decide

What This Skill Does

How to Use

Convert a character design into an animated 3D character

Create a rotating 3D product

Prototype a brand mascot

Instructions

Step 1: Evaluate the source image

Step 2: Choose the conversion tool

Step 3: Conversion pipeline

Step 4: Optimization and cleanup

Step 5: Rigging with Mixamo (characters only)

Step 6: Export and integration

Examples

Example 1: Game character - Character Selection Screen

Example 2: Brand mascot for landing page

Example 3: 360° e-commerce product

Checklists & Templates

Pre-Conversion Checklist

3D Brief Template

Tool Comparison Matrix

Troubleshooting

Skill Boundaries

What This Skill Does Well

What This Skill Cannot Do

References

Tools

Tutorials

Research

Related Skills