image-to-3d-pipeline

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Image to 3D Pipeline

图像转3D工作流

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).
使用Dilum Sanjaya工作流(Hunyuan3D + Mixamo),在30分钟内将2D图像转换为可用于网页或游戏的动画3D模型。

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
  • 为网站创建3D角色 - 吉祥物、头像、交互式插画
  • 制作游戏资产原型 - 角色设计、道具、场景
  • 制作3D营销内容 - 可旋转产品、动画角色
  • 转换现有插画 - 标志、吉祥物、角色设计→3D
  • 快速测试创意想法 - 30分钟完成3D原型,而非耗时数天

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.
来源:Dilum Sanjaya (@DilumSanjaya) - 游戏角色工作流(2025-2026)
核心原则:"2D图像是你的蓝图。Hunyuan3D生成网格,Mixamo自动添加绑定。30分钟内,你就能得到可在Three.js或Unity中使用的动画角色。"
重要意义:传统上,从2D概念到绑定完成的3D模型需要数天的建模工作。本工作流将时间缩短至不到一小时,同时产出的资产质量足以投入生产。

What Claude Does vs What You Decide

Claude的职责 vs 你的决策

Claude DoesYou Decide
Structures video workflowFinal creative vision
Suggests shot compositionsEquipment selection
Creates storyboard templatesBrand aesthetics
Generates script frameworksFinal approval
Identifies technical requirementsBudget allocation
Claude的工作你的决策
规划视频工作流最终创意愿景
建议镜头构图设备选择
创建故事板模板品牌美学风格
生成脚本框架最终审批
识别技术需求预算分配

What This Skill Does

本技能的功能

  1. Guide le choix de l'outil 3D - Hunyuan3D vs Tripo vs Meshy selon le use case
  2. Structure le workflow complet - De l'image source au modèle exporté
  3. Optimise le mesh généré - Réduction de polygones, correction de textures
  4. Automatise le rigging - Configuration Mixamo pour personnages
  5. Prépare l'export - Formats GLB/FBX selon la destination
  1. 指导3D工具选择 - 根据使用场景选择Hunyuan3D、Tripo或Meshy
  2. 构建完整工作流 - 从源图像到导出模型的全流程
  3. 优化生成的网格 - 多边形简化、纹理修正
  4. 自动化绑定 - 为角色配置Mixamo
  5. 准备导出 - 根据目标平台选择GLB/FBX格式

How to Use

使用方法

Convertir un character design en personnage 3D animé

将角色设计转换为动画3D角色

J'ai cette image de personnage [joindre image]. Aide-moi à la convertir en modèle 3D animé avec le skill image-to-3d-pipeline.
我有这张角色图像[附上图片]。请使用image-to-3d-pipeline技能帮我将其转换为动画3D模型。

Créer un produit 3D rotatif

创建可旋转3D产品模型

Je veux créer un modèle 3D de mon produit [description] à partir de photos. Guide-moi avec le pipeline image-to-3d.
我想根据照片创建我的产品[描述]的3D模型。请使用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.
这是我们的吉祥物设计[图片]。我想将其转换为3D模型用于我们的网站,并添加Idle动画。

Instructions

操作步骤

Quand vous aidez à convertir une image 2D en 3D, suivez ce processus :
当你协助将2D图像转换为3D时,请遵循以下流程:

Step 1: Évaluer l'image source

步骤1:评估源图像

undefined
undefined

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

---
图像类型: [ ] 角色设计 / 人物 [ ] 物品 / 产品 [ ] 插画 / 标志 [ ] 实景照片
3D转换适配质量: [ ] ✅ 清晰的正面视角 [ ] ✅ 纯色或透明背景 [ ] ✅ 色彩/纹理区分明显 [ ] ✅ 比例协调 [ ] ⚠️ 细节复杂(转换中可能丢失)
预估复杂度: [ ] 简单 - 基础几何形状 [ ] 中等 - 人物或有机物体 [ ] 复杂 - 精细细节、多配件

**关键点:**
- 正面视角的图像效果更佳
- 透明/白色背景简化处理流程
- 肢体分明的角色绑定效果更好

---

Step 2: Choisir l'outil de conversion

步骤2:选择转换工具

OutilForcesIdéal pourLimitations
Hunyuan3DMeilleure texture, open sourcePersonnages, objets détaillésCleanup parfois nécessaire
Tripo AIUX simple, rigging autoPrototypes rapidesMoins de contrôle
MeshyBon pour styliséAssets cartoon/low-polyTextures moins réalistes
Rodin Gen-1Vitesse, topology game-readyGame assetsMoins de fidélité
CSMMulti-view consistencyObjets complexesPlus 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

工具优势适用场景局限性
Hunyuan3D纹理质量最佳、开源角色、细节丰富的物体有时需要清理
Tripo AI操作体验简单、自动绑定快速原型可控性较低
Meshy适合风格化设计卡通/低多边形资产纹理真实度较低
Rodin Gen-1速度快、拓扑符合游戏要求游戏资产还原度较低
CSM多视角一致性好复杂物体速度较慢
按场景推荐:
  • 网页角色 → Hunyuan3D + Mixamo
  • 快速原型 → Tripo AI
  • 风格化游戏资产 → Meshy或Rodin
  • 写实产品 → Hunyuan3D + 后期处理

Step 3: Pipeline de conversion

步骤3:转换工作流

undefined
undefined

Pipeline Standard (Hunyuan3D)

标准工作流(Hunyuan3D)

A. Préparation de l'image

A. 图像准备

  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)
  1. 移除背景(使用remove.bg或内置工具)
  2. 紧贴主体裁剪
  3. 推荐分辨率:最低1024x1024
  4. 保存为PNG格式(保留透明度)

B. Génération 3D

B. 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)
  1. 上传至Hunyuan3D(hunyuan3d.tencent.com)
  2. 选择模式:"Image to 3D"
  3. 推荐参数:
    • 质量:高
    • 纹理:启用
    • 多视角:启用(若可用)
  4. 生成并下载(GLB或OBJ格式)

C. Validation du mesh

C. 网格验证

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

---
  • 在Blender或在线查看器中打开
  • 检查:拓扑结构、纹理、比例
  • 识别问题:孔洞、缺失纹理

---

Step 4: Optimisation et nettoyage

步骤4:优化与清理

undefined
undefined

Checklist Optimisation

优化检查清单

Mesh

网格

[ ] Poly count acceptable (< 50k pour web, < 100k pour jeu) [ ] Pas de faces inversées [ ] Pas de vertices orphelins [ ] Mesh manifold (étanche)
[ ] 多边形数量达标(网页用<50k,游戏用<100k) [ ] 无反转面 [ ] 无孤立顶点 [ ] 网格闭合(流形)

Textures

纹理

[ ] UV map correcte [ ] Résolution appropriée (1024x1024 ou 2048x2048) [ ] Pas de stretching visible [ ] Couleurs fidèles à l'original
[ ] UV映射正确 [ ] 分辨率合适(1024x1024或2048x2048) [ ] 无明显拉伸 [ ] 颜色与原图一致

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

---
[ ] 比例正确 [ ] 方向正确(根据目标平台选择Y-up或Z-up) [ ] 居中于原点

**清理工具:**
- **Blender**(免费)- Decimate修改器、纹理绘制
- **Meshlab**(免费)- 自动修复
- **gltf-transform**(CLI)- 针对网页优化GLB

---

Step 5: Rigging avec Mixamo (personnages uniquement)

步骤5:使用Mixamo进行绑定(仅角色)

undefined
undefined

Workflow Mixamo

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

---
  1. 将网格导出为FBX格式(不嵌入纹理)
  2. 上传至mixamo.com
  3. 定位标记点:
    • 下巴
    • 手腕
    • 肘部
    • 膝盖
    • 腹股沟
  4. 选择"自动绑定"
  5. 选择动画:
    • Idle(站立、呼吸)
    • 行走
    • 奔跑
    • 其他按需选择
  6. 下载带蒙皮的FBX文件

**网页推荐动画:**
- `Idle` - 基础动画
- `Walking` - 用于移动
- `Waving` - 交互动作
- `Talking` - 若有旁白

---

Step 6: Export et intégration

步骤6:导出与集成

DestinationFormatNotes
Three.js / WebGLBFormat recommandé, embedde textures
UnityFBXImport natif, configurer materials
UnrealFBXNécessite skeleton retargeting
React Three FiberGLBUtiliser gltfjsx pour composant
bash
undefined
目标平台格式注意事项
Three.js / 网页GLB推荐格式,嵌入纹理
UnityFBX原生导入,配置材质
UnrealFBX需要骨骼重定向
React Three FiberGLB使用gltfjsx生成组件
bash
undefined

Optimisation GLB pour web (gltf-transform)

针对网页优化GLB(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
npx @gltf-transform/cli optimize input.glb output.glb --compress draco

**目标文件大小:**
- 核心3D资产(首屏可见):<2MB
- 次要资产:<500KB
- 动画角色:<5MB

Examples

示例

Example 1: Personnage de jeu - Character Selection Screen

示例1:游戏角色 - 角色选择界面

Input: Concept art de personnage (style cartoon)
Process:
  1. Nano Banana → Génération character sheet cohérent
  2. Hunyuan3D → Conversion en mesh 3D
  3. Blender → Cleanup rapide (5 min)
  4. Mixamo → Auto-rig + animations idle/select
  5. Three.js → Intégration avec rotation au survol
Output: Personnage 3D interactif avec 3 animations Temps total: ~45 minutes
Code Three.js basique:
jsx
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} />
}

输入:卡通风格角色概念图
流程:
  1. Nano Banana → 生成一致的角色设定表
  2. Hunyuan3D → 转换为3D网格
  3. Blender → 快速清理(5分钟)
  4. Mixamo → 自动绑定 + Idle/选择动画
  5. Three.js → 集成并添加悬停旋转效果
输出:带3种动画的交互式3D角色 总耗时:~45分钟
基础Three.js代码:
jsx
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

示例2:落地页品牌吉祥物

Input: Illustration 2D de mascotte entreprise
Process:
  1. Cleanup fond (remove.bg)
  2. Hunyuan3D → Mesh 3D avec textures
  3. Pas de rigging (statique)
  4. Export GLB optimisé
  5. Spline ou Three.js → Animation CSS/JS simple (rotation, bounce)
Output: Mascotte 3D tournante en hero section Temps total: ~20 minutes

输入:企业吉祥物2D插画
流程:
  1. 清理背景(remove.bg)
  2. Hunyuan3D → 带纹理的3D网格
  3. 无需绑定(静态)
  4. 导出优化后的GLB
  5. Spline或Three.js → 添加简单的CSS/JS动画(旋转、弹跳)
输出:首屏区域的旋转3D吉祥物 总耗时:~20分钟

Example 3: Produit e-commerce 360°

示例3:电商360°产品模型

Input: 4 photos du produit (face, dos, côtés)
Process:
  1. CSM → Multi-view reconstruction (meilleur pour objets)
  2. Cleanup Blender → Simplifier geometry
  3. Bake textures hautes résolution
  4. Export GLB
  5. model-viewer → Viewer 3D responsive
Output: Viewer 3D interactif avec zoom/rotation Temps total: ~1 heure
Code model-viewer:
html
<model-viewer
  src="product.glb"
  ar
  auto-rotate
  camera-controls
  shadow-intensity="1"
></model-viewer>
输入:4张产品照片(正面、背面、侧面)
流程:
  1. CSM → 多视角重建(适合物体)
  2. Blender清理 → 简化几何结构
  3. 烘焙高分辨率纹理
  4. 导出GLB
  5. model-viewer → 响应式3D查看器
输出:可缩放/旋转的交互式3D查看器 总耗时:~1小时
model-viewer代码:
html
<model-viewer
  src="product.glb"
  ar
  auto-rotate
  camera-controls
  shadow-intensity="1"
></model-viewer>

Checklists & Templates

检查清单与模板

Checklist Pré-Conversion

转换前检查清单

undefined
undefined

Image Source

源图像

[ ] Résolution suffisante (min 1024x1024) [ ] Fond transparent ou uniforme [ ] Sujet bien délimité [ ] Style cohérent (pas de mix photo/illustration)
[ ] 分辨率足够(最低1024x1024) [ ] 透明或纯色背景 [ ] 主体边界清晰 [ ] 风格统一(无照片/插画混合)

Objectif

目标

[ ] Destination claire (web/jeu/vidéo) [ ] Poly budget défini [ ] Animations nécessaires identifiées [ ] Format d'export choisi
undefined
[ ] 目标平台明确(网页/游戏/视频) [ ] 多边形预算已确定 [ ] 所需动画已明确 [ ] 导出格式已选定
undefined

Template Brief 3D

3D需求简报模板

undefined
undefined

Brief Conversion 2D → 3D

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:

undefined
源图像: [附上] 类型: [ ] 角色 [ ] 物品 [ ] 标志 [ ] 其他
最终目标:
  • 平台:_______________
  • 交互:[ ] 静态 [ ] 旋转 [ ] 完整动画
  • 最大文件大小:___ MB
期望风格:
  • 忠于原作
  • 风格化/低多边形
  • 写实
动画(若为角色):
  • Idle
  • 行走
  • 其他:_______________
约束条件:

undefined

Tool Comparison Matrix

工具对比矩阵

CritèreHunyuan3DTripo AIMeshyRodinCSM
Qualité texture⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Vitesse⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Facilité⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Cleanup requisMoyenFaibleFaibleFaibleMoyen
PrixGratuitFreemiumFreemiumPayantFreemium
Best forPersonnagesPrototypesStyliséJeuxMulti-view
评估标准Hunyuan3DTripo AIMeshyRodinCSM
纹理质量⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
速度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
易用性⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
所需清理工作中等少量少量少量中等
价格免费免费增值免费增值付费免费增值
最佳适用场景角色原型风格化设计游戏多视角物体

Troubleshooting

故障排除

ProblèmeCause probableSolution
Mesh "explosé"Fond non transparentRetirer le fond avant upload
Textures manquantesExport sans embeddeRe-exporter avec textures packées
Rigging échouePose non T-poseModifier pose dans Blender avant Mixamo
Fichier trop lourdTrop de polygonesUtiliser Decimate modifier
Animations saccadéesFPS incompatibleRe-exporter à 30fps
问题可能原因解决方案
网格“炸开”背景不透明上传前移除背景
缺失纹理导出时未嵌入纹理重新导出并打包纹理
绑定失败非T字姿势在Blender中调整姿势后再上传至Mixamo
文件过大多边形过多使用Decimate修改器简化
动画卡顿FPS不兼容重新导出为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

工具

Tutorials

教程

  • Dilum Sanjaya: Character to 3D workflows (X/Twitter)
  • Three.js Fundamentals: Loading 3D models
  • React Three Fiber: useGLTF documentation
  • Dilum Sanjaya:角色转3D工作流(X/Twitter)
  • Three.js基础:加载3D模型
  • React Three Fiber:useGLTF文档

Research

研究

  • docs/research-ai-design-workflows-2026-01.md
    - Deep research 75+ sources
  • docs/research-ai-design-workflows-2026-01.md
    - 基于75+来源的深度研究

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
  • character-design-ai/
    - 生成一致的角色设定表(作为本技能的输入)
  • vibe-coding-design/
    - 快速迭代方法论
  • ai-ui-generation/
    - 将3D模型集成至生成式UI

技能版本:1.0 最后更新:2026-01-28 分类:ai-design