image-to-3d-pipeline

画像から3Dへのパイプライン

Dilum Sanjaya のワークフロー（Hunyuan3D + Mixamo）を使って、2D画像をウェブやゲームですぐに使えるアニメーション付き3Dモデルに30分以内で変換します。

このスキルを使う場面

• ウェブサイト用の3Dキャラクターを作成する - マスコット、アバター、インタラクティブなイラスト
• ゲームアセットのプロトタイプを作成する - キャラクターデザイン、プロップ、環境
• 3Dマーケティングコンテンツを制作する - 回転する製品、アニメーション付きキャラクター
• 既存のイラストを変換する - ロゴ、マスコット、キャラクターデザイン → 3D
• アイデアをすばやく試す - 数日ではなく30分で3Dプロトタイプを作成

方法論の基盤

出典：Dilum Sanjaya（@DilumSanjaya）- ゲームキャラクターパイプライン（2025-2026）

基本原則：「2D画像は設計図です。Hunyuan3D がメッシュを生成し、Mixamo が自動的にリグを追加します。30分で、Three.js や Unity で使えるアニメーション付きキャラクターが完成します。」

これが重要な理由：従来、2Dコンセプトからリグ付き3Dモデルを作成するには、数日間のモデリング作業が必要でした。このワークフローでは、制作に十分な品質のアセットを生成しながら、所要時間を1時間未満に短縮できます。

Claude が行うことと、あなたが決めること

Claude が行うこと	あなたが決めること
動画ワークフローを構成します	最終的なクリエイティブビジョン
ショット構成を提案します	機材の選定
ストーリーボードのテンプレートを作成します	ブランドの美的表現
スクリプトのフレームワークを生成します	最終承認
技術要件を特定します	予算の配分

このスキルでできること

1. 3Dツールの選択をガイドします - ユースケースに応じた Hunyuan3D、Tripo、Meshy の選択
2. ワークフロー全体を構成します - 元画像からエクスポート済みモデルまで
3. 生成されたメッシュを最適化します - ポリゴン数の削減、テクスチャの修正
4. リギングを自動化します - キャラクター向けの Mixamo 設定
5. エクスポートを準備します - 出力先に応じた GLB/FBX 形式

使い方

キャラクターデザインをアニメーション付き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.

回転する3D製品を作成する

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

ブランドマスコットのプロトタイプを作成する

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

手順

2D画像から3Dへの変換を支援する際は、次の手順に従ってください。

Step 1: 元画像を評価する

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

ポイント:

• 正面からの画像は、より良い結果が得られます
• 透明または白の背景にすると、処理が簡単になります
• 四肢がはっきり分かれているキャラクターは、より適切にリギングできます

---

Step 2: 変換ツールを選ぶ

ツール	強み	最適な用途	制限事項
Hunyuan3D	優れたテクスチャ、オープンソース	キャラクター、詳細なオブジェクト	後処理が必要な場合があります
Tripo AI	シンプルな UX、自動リギング	迅速なプロトタイプ	制御性が低め
Meshy	スタイライズされた表現に適しています	カートゥーン／ローポリのアセット	テクスチャのリアリティが低め
Rodin Gen-1	高速、ゲーム向けトポロジー	ゲームアセット	忠実度が低め
CSM	マルチビューの一貫性	複雑なオブジェクト	処理が遅め

ユースケース別の推奨:

• ウェブ用キャラクター → Hunyuan3D + Mixamo
• 迅速なプロトタイプ → Tripo AI
• スタイライズされたゲームアセット → Meshy または Rodin
• リアルな製品 → Hunyuan3D + ポストプロセッシング

---

Step 3: 変換パイプライン

## 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: 最適化とクリーンアップ

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

クリーンアップツール:

• Blender（無料）- Decimate モディファイア、テクスチャペイント
• Meshlab（無料）- 自動修復
• gltf-transform（CLI）- ウェブ向け GLB 最適化

---

Step 5: Mixamo でリギングする（キャラクターのみ）

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

ウェブ向けのおすすめアニメーション:

• Idle - 基本アニメーション
• Walking - 移動用
• Waving - インタラクション用
• Talking - ナレーションがある場合

---

ステップ 6：エクスポートと統合

保存先	形式	備考
Three.js / Web	GLB	推奨形式。テクスチャを埋め込みます
Unity	FBX	ネイティブインポートに対応しています。マテリアルを設定してください
Unreal	FBX	スケルトンのリターゲティングが必要です
React Three Fiber	GLB	gltfjsx を使ってコンポーネントを作成します

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

目標サイズ：

• ヒーロー 3D（最初に表示されるもの）：< 2MB
• セカンダリアセット：< 500KB
• アニメーション付きキャラクター：< 5MB

例

例 1：ゲームキャラクター - キャラクター選択画面

入力：キャラクターのコンセプトアート（カートゥーンスタイル）

プロセス：

1. Nano Banana → 一貫性のあるキャラクターシートを生成
2. Hunyuan3D → 3D メッシュに変換
3. Blender → 簡単なクリーンアップ（5 分）
4. Mixamo → 自動リギング + アイドル／選択アニメーション
5. Three.js → ホバー時の回転を加えて統合

出力：3 つのアニメーションを備えたインタラクティブな 3D キャラクター 所要時間：約 45 分

基本的な Three.js コード：

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} />
}

---

例 2：ランディングページ向けのブランドマスコット

入力：企業マスコットの 2D イラスト

プロセス：

1. 背景をクリーンアップ（remove.bg）
2. Hunyuan3D → テクスチャ付き 3D メッシュ
3. リギングなし（静止状態）
4. 最適化した GLB をエクスポート
5. Spline または Three.js → シンプルな CSS/JS アニメーション（回転、バウンス）

出力：ヒーローセクションで回転する 3D マスコット 所要時間：約 20 分

---

例 3：360° EC 商品

入力：商品の写真 4 枚（正面、背面、側面）

プロセス：

1. CSM → マルチビュー再構成（オブジェクトに最適）
2. Blender でクリーンアップ → ジオメトリを簡素化
3. 高解像度テクスチャをベイク
4. GLB をエクスポート
5. model-viewer → レスポンシブな 3D ビューアー

出力：ズーム／回転が可能なインタラクティブ 3D ビューアー 所要時間：約 1 時間

model-viewer コード：

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

チェックリストとテンプレート

変換前チェックリスト

## 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 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:**
- _______________

ツール比較表

基準	Hunyuan3D	Tripo AI	Meshy	Rodin	CSM
テクスチャ品質	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
速度	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
使いやすさ	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
必要なクリーンアップ	中	少	少	少	中
価格	無料	フリーミアム	フリーミアム	有料	フリーミアム
最適な用途	キャラクター	プロトタイプ	スタイライズド	ゲーム	マルチビュー

トラブルシューティング

問題	考えられる原因	解決策
メッシュが「崩れている」	背景が透明ではない	アップロード前に背景を削除する
テクスチャがない	テクスチャを埋め込まずにエクスポートした	テクスチャをパックして再エクスポートする
リギングに失敗する	ポーズが T ポーズではない	Mixamo を使う前に Blender でポーズを修正する
ファイルが大きすぎる	ポリゴンが多すぎる	Decimate modifier を使う
アニメーションがカクつく	FPS が合っていない	30fps で再エクスポートする

スキルの範囲

このスキルが得意なこと

• 映像制作ワークフローの構成
• ストーリーボードのフレームワーク作成
• 技術的なアプローチの提案
• クリエイティブディレクション用テンプレートの提供

このスキルでできないこと

• プロの映像制作の代替
• 動画ファイルの直接編集
• 最終的なクリエイティブ判断
• 視聴者のエンゲージメントの保証

参考資料

ツール

• Hunyuan3D - Tencent、無料
• Tripo AI - フリーミアム
• Meshy - フリーミアム
• Mixamo - Adobe、無料
• gltf-transform - CLI 最適化

チュートリアル

• Dilum Sanjaya：キャラクターから 3D へのワークフロー（X/Twitter）
• Three.js Fundamentals：3D モデルの読み込み
• React Three Fiber：useGLTF ドキュメント

研究

• docs/research-ai-design-workflows-2026-01.md - 75 件以上の情報源を網羅した詳細な調査

関連スキル

• character-design-ai/ - 一貫性のあるキャラクター画像を生成します（このスキルへの入力）
• vibe-coding-design/ - 迅速な反復手法
• ai-ui-generation/ - 生成されたインターフェースに3Dを統合します

---

スキルのバージョン：1.0 最終更新日：2026-01-28 カテゴリ：ai-design