image-to-3d-pipeline
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImage 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 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 |
| Claude的工作 | 你的决策 |
|---|---|
| 规划视频工作流 | 最终创意愿景 |
| 建议镜头构图 | 设备选择 |
| 创建故事板模板 | 品牌美学风格 |
| 生成脚本框架 | 最终审批 |
| 识别技术需求 | 预算分配 |
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
- 指导3D工具选择 - 根据使用场景选择Hunyuan3D、Tripo或Meshy
- 构建完整工作流 - 从源图像到导出模型的全流程
- 优化生成的网格 - 多边形简化、纹理修正
- 自动化绑定 - 为角色配置Mixamo
- 准备导出 - 根据目标平台选择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:评估源图像
undefinedundefinedAnalyse 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:选择转换工具
| 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
| 工具 | 优势 | 适用场景 | 局限性 |
|---|---|---|---|
| Hunyuan3D | 纹理质量最佳、开源 | 角色、细节丰富的物体 | 有时需要清理 |
| Tripo AI | 操作体验简单、自动绑定 | 快速原型 | 可控性较低 |
| Meshy | 适合风格化设计 | 卡通/低多边形资产 | 纹理真实度较低 |
| Rodin Gen-1 | 速度快、拓扑符合游戏要求 | 游戏资产 | 还原度较低 |
| CSM | 多视角一致性好 | 复杂物体 | 速度较慢 |
按场景推荐:
- 网页角色 → Hunyuan3D + Mixamo
- 快速原型 → Tripo AI
- 风格化游戏资产 → Meshy或Rodin
- 写实产品 → Hunyuan3D + 后期处理
Step 3: Pipeline de conversion
步骤3:转换工作流
undefinedundefinedPipeline Standard (Hunyuan3D)
标准工作流(Hunyuan3D)
A. Préparation de l'image
A. 图像准备
- Supprimer le fond (remove.bg ou outil intégré)
- Recadrer serré sur le sujet
- Résolution recommandée: 1024x1024 minimum
- Sauvegarder en PNG (préserver transparence)
- 移除背景(使用remove.bg或内置工具)
- 紧贴主体裁剪
- 推荐分辨率:最低1024x1024
- 保存为PNG格式(保留透明度)
B. Génération 3D
B. 3D生成
- Uploader sur Hunyuan3D (hunyuan3d.tencent.com)
- Sélectionner mode: "Image to 3D"
- Paramètres recommandés:
- Quality: High
- Texture: Enable
- Multi-view: Enable (si disponible)
- Générer et télécharger (GLB ou OBJ)
- 上传至Hunyuan3D(hunyuan3d.tencent.com)
- 选择模式:"Image to 3D"
- 推荐参数:
- 质量:高
- 纹理:启用
- 多视角:启用(若可用)
- 生成并下载(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:优化与清理
undefinedundefinedChecklist 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进行绑定(仅角色)
undefinedundefinedWorkflow Mixamo
Mixamo工作流
- Exporter le mesh en FBX (sans textures embarquées)
- Uploader sur mixamo.com
- Positionner les markers:
- Chin
- Wrists
- Elbows
- Knees
- Groin
- Sélectionner "Auto-Rig"
- Choisir animations:
- Idle (standing, breathing)
- Walk
- Run
- Autres selon besoin
- 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
---- 将网格导出为FBX格式(不嵌入纹理)
- 上传至mixamo.com
- 定位标记点:
- 下巴
- 手腕
- 肘部
- 膝盖
- 腹股沟
- 选择"自动绑定"
- 选择动画:
- Idle(站立、呼吸)
- 行走
- 奔跑
- 其他按需选择
- 下载带蒙皮的FBX文件
**网页推荐动画:**
- `Idle` - 基础动画
- `Walking` - 用于移动
- `Waving` - 交互动作
- `Talking` - 若有旁白
---Step 6: Export et intégration
步骤6:导出与集成
| 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 |
bash
undefined| 目标平台 | 格式 | 注意事项 |
|---|---|---|
| Three.js / 网页 | GLB | 推荐格式,嵌入纹理 |
| Unity | FBX | 原生导入,配置材质 |
| Unreal | FBX | 需要骨骼重定向 |
| React Three Fiber | GLB | 使用gltfjsx生成组件 |
bash
undefinedOptimisation 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é: < 5MBnpx @gltf-transform/cli optimize input.glb output.glb --compress draco
**目标文件大小:**
- 核心3D资产(首屏可见):<2MB
- 次要资产:<500KB
- 动画角色:<5MBExamples
示例
Example 1: Personnage de jeu - Character Selection Screen
示例1:游戏角色 - 角色选择界面
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:
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} />
}输入:卡通风格角色概念图
流程:
- Nano Banana → 生成一致的角色设定表
- Hunyuan3D → 转换为3D网格
- Blender → 快速清理(5分钟)
- Mixamo → 自动绑定 + Idle/选择动画
- 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:
- 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
输入:企业吉祥物2D插画
流程:
- 清理背景(remove.bg)
- Hunyuan3D → 带纹理的3D网格
- 无需绑定(静态)
- 导出优化后的GLB
- 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:
- 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:
html
<model-viewer
src="product.glb"
ar
auto-rotate
camera-controls
shadow-intensity="1"
></model-viewer>输入:4张产品照片(正面、背面、侧面)
流程:
- CSM → 多视角重建(适合物体)
- Blender清理 → 简化几何结构
- 烘焙高分辨率纹理
- 导出GLB
- 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
转换前检查清单
undefinedundefinedImage 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[ ] 目标平台明确(网页/游戏/视频)
[ ] 多边形预算已确定
[ ] 所需动画已明确
[ ] 导出格式已选定
undefinedTemplate Brief 3D
3D需求简报模板
undefinedundefinedBrief 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
- 行走
- 其他:_______________
约束条件:
undefinedTool 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 |
| 评估标准 | Hunyuan3D | Tripo AI | Meshy | Rodin | CSM |
|---|---|---|---|---|---|
| 纹理质量 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| 速度 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ |
| 易用性 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| 所需清理工作 | 中等 | 少量 | 少量 | 少量 | 中等 |
| 价格 | 免费 | 免费增值 | 免费增值 | 付费 | 免费增值 |
| 最佳适用场景 | 角色 | 原型 | 风格化设计 | 游戏 | 多视角物体 |
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 |
| 问题 | 可能原因 | 解决方案 |
|---|---|---|
| 网格“炸开” | 背景不透明 | 上传前移除背景 |
| 缺失纹理 | 导出时未嵌入纹理 | 重新导出并打包纹理 |
| 绑定失败 | 非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
工具
- Hunyuan3D - Tencent, gratuit
- Tripo AI - Freemium
- Meshy - Freemium
- Mixamo - Adobe, gratuit
- gltf-transform - CLI optimisation
- Hunyuan3D - 腾讯,免费
- Tripo AI - 免费增值
- Meshy - 免费增值
- Mixamo - Adobe,免费
- gltf-transform - CLI优化工具
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
研究
- - Deep research 75+ sources
docs/research-ai-design-workflows-2026-01.md
- - 基于75+来源的深度研究
docs/research-ai-design-workflows-2026-01.md
Related Skills
相关技能
- - Générer des images de personnages cohérentes (input pour ce skill)
character-design-ai/ - - Méthodologie itérative rapide
vibe-coding-design/ - - Intégrer le 3D dans une interface générée
ai-ui-generation/
Skill version: 1.0
Last updated: 2026-01-28
Category: ai-design
- - 生成一致的角色设定表(作为本技能的输入)
character-design-ai/ - - 快速迭代方法论
vibe-coding-design/ - - 将3D模型集成至生成式UI
ai-ui-generation/
技能版本:1.0
最后更新:2026-01-28
分类:ai-design