Image to 3D Pipeline

2D画像を30分以内にウェブまたはゲーム向けの動くアニメーション3Dモデルに変換します。Dilum Sanjayaワークフロー(Hunyuan3D + Mixamo)を使用します。

このスキルを使用する場合

• ウェブサイト向け3Dキャラクター作成 - マスコット、アバター、インタラクティブなイラスト
• ゲームアセットのプロトタイピング - キャラクターデザイン、プロップ、環境
• 3Dマーケティングコンテンツの制作 - 回転製品、アニメーション化されたキャラクター
• 既存のイラストの変換 - ロゴ、マスコット、キャラクターデザイン → 3D
• アイデアの迅速なテスト - 3Dプロトタイプを数日ではなく30分で作成

方法論の基礎

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

核となる原則: 「2D画像はあなたのブループリントです。Hunyuan3Dがメッシュを生成し、Mixamoが自動的にリグを追加します。30分で、Three.jsまたはUnityで使用可能なアニメーション化されたキャラクターが完成します。」

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

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

Claudeが行うこと	あなたが決めること
ビデオワークフローの構造化	最終的なクリエイティブビジョン
ショット構成の提案	機器選択
ストーリーボードテンプレートの作成	ブランドの美学
スクリプトフレームワークの生成	最終承認
技術要件の特定	予算配分

このスキルが行うこと

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

使い方

キャラクターデザインをアニメーション3Dキャラクターに変換

このキャラクター画像[画像を添付]があります。image-to-3d-pipelineスキルを使用して3Dアニメーションモデルに変換するのを手伝ってください。

回転する3D製品を作成

写真からこの製品[説明]の3Dモデルを作成したいです。image-to-3dパイプラインでガイドしてください。

ブランドマスコットをプロトタイピング

私たちのマスコットのデザインはこちら[画像]です。ウェブサイト用にアイドルアニメーション付きで3Dに変換したいです。

指示

2Dから3Dへの画像変換を支援する場合、以下のプロセスに従ってください：

ステップ1: ソース画像を評価

## ソース画像の分析

**画像タイプ:**
[ ] キャラクターデザイン / キャラクター
[ ] オブジェクト / 製品
[ ] イラスト / ロゴ
[ ] 実写写真

**3D変換の品質:**
[ ] ✅ 明確な正面図
[ ] ✅ シンプルまたは透明な背景
[ ] ✅ 区別された色/テクスチャ
[ ] ✅ 一貫した比率
[ ] ⚠️ 複雑な詳細(変換時に失われる可能性)

**推定複雑度:**
[ ] シンプル - 基本的な幾何学形状
[ ] 中程度 - 有機的キャラクターまたはオブジェクト
[ ] 複雑 - 細かい詳細、複数のアクセサリー

重要なポイント:

• 正面図は最良の結果を得ます
• 透明/白い背景は処理を簡素化します
• 異なるメンバーを持つキャラクターはより良くリグされます

---

ステップ2: 変換ツールを選択

ツール	強み	理想的な用途	制限事項
Hunyuan3D	最高のテクスチャ、オープンソース	キャラクター、詳細なオブジェクト	クリーンアップが必要な場合がある
Tripo AI	シンプルなUX、自動リギング	迅速なプロトタイプ	コントロールが少ない
Meshy	スタイライズに適している	カートゥーン/ローポリアセット	現実的なテクスチャが少ない
Rodin Gen-1	速度、ゲーム対応トポロジー	ゲームアセット	忠実度が低い
CSM	マルチビュー一貫性	複雑なオブジェクト	より遅い

ユースケース別の推奨:

• ウェブサイト向けキャラクター → Hunyuan3D + Mixamo
• 迅速なプロトタイプ → Tripo AI
• スタイライズされたゲームアセット → Meshy または Rodin
• 現実的な製品 → Hunyuan3D + ポスト処理

---

ステップ3: 変換パイプライン

## 標準パイプライン (Hunyuan3D)

### A. 画像準備
1. 背景を削除 (remove.bg またはビルトインツール)
2. 被写体を厳密にトリミング
3. 推奨解像度: 最小1024x1024
4. PNGで保存 (透明度を保持)

### B. 3D生成
1. Hunyuan3D (hunyuan3d.tencent.com) にアップロード
2. モード選択: 「Image to 3D」
3. 推奨パラメータ:
   - Quality: High
   - Texture: Enable
   - Multi-view: Enable (利用可能な場合)
4. 生成してダウンロード (GLB または OBJ)

### C. メッシュの検証
- BlenderまたはオンラインビューアーでOpenin
- 確認: トポロジー、テクスチャ、スケール
- 問題を特定: 穴、欠落したテクスチャ

---

ステップ4: 最適化とクリーンアップ

## 最適化チェックリスト

### メッシュ
[ ] 許容可能なポリゴン数 (ウェブ向け < 50k、ゲーム向け < 100k)
[ ] 反転した面がない
[ ] 孤立した頂点がない
[ ] メッシュが閉じている (防水)

### テクスチャ
[ ] 正しいUVマップ
[ ] 適切な解像度 (1024x1024 または 2048x2048)
[ ] 目立つストレッチがない
[ ] オリジナルに忠実な色

### スケール
[ ] 正しい比率
[ ] 向き (目的地に応じてY-up または Z-up)
[ ] オリジンに中央配置

クリーンアップツール:

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

---

ステップ5: Mixamoでのリギング (キャラクターのみ)

## Mixamoワークフロー

1. メッシュをFBX形式でエクスポート (埋め込みテクスチャなし)
2. mixamo.comにアップロード
3. マーカーを配置:
   - Chin (顎)
   - Wrists (手首)
   - Elbows (肘)
   - Knees (膝)
   - Groin (股間)
4. 「Auto-Rig」を選択
5. アニメーションを選択:
   - Idle (standing, breathing)
   - Walk (歩行)
   - Run (走行)
   - その他必要に応じて
6. スキン付きFBXでダウンロード

ウェブ向けの推奨アニメーション:

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

---

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

目的地	形式	注記
Three.js / Web	GLB	推奨形式、テクスチャを埋め込む
Unity	FBX	ネイティブインポート、マテリアル設定
Unreal	FBX	スケルトン再ターゲット必須
React Three Fiber	GLB	gltfjsxを使用してコンポーネント化

# ウェブ向けGLB最適化 (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: eコマース製品360°ビューアー

入力: 製品の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>

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

変換前チェックリスト

## イメージ ソース
[ ] 十分な解像度 (最小1024x1024)
[ ] 透明またはユニフォームな背景
[ ] よく定義されたサブジェクト
[ ] 一貫したスタイル (写真/イラストのミックスなし)

## 目的
[ ] 明確な目的地 (ウェブ/ゲーム/ビデオ)
[ ] ポリゴン予算を定義
[ ] 必要なアニメーションを特定
[ ] エクスポート形式を選択

2D → 3D変換ブリーフテンプレート

## 2D → 3D変換ブリーフ

**ソース画像:** [添付]
**タイプ:** [ ] キャラクター [ ] オブジェクト [ ] ロゴ [ ] その他

**最終的な目的地:**
- プラットフォーム: _______________
- インタラクション: [ ] 静的 [ ] 回転 [ ] 完全なアニメーション
- 最大サイズ: ___ MB

**希望スタイル:**
- [ ] オリジナルに忠実
- [ ] スタイライズ/ローポリ
- [ ] 現実的

**アニメーション (キャラクターの場合):**
- [ ] Idle
- [ ] Walk
- [ ] その他: _______________

**制限事項:**
- _______________

ツール比較マトリックス

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

トラブルシューティング

問題	考えられる原因	解決方法
メッシュが「爆発している」	背景が透明ではない	アップロード前に背景を削除
テクスチャが欠落	パックされていないエクスポート	テクスチャを埋め込んで再エクスポート
リギングが失敗	T-ポーズではない	Blenderで修正後Mixamoへ
ファイルが大きすぎる	ポリゴンが多すぎる	Decimateモディファイアを使用
アニメーションがカクカク	非互換なFPS	30fpsで再エクスポート

スキルの範囲

このスキルが得意なこと

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

このスキルが出来ないこと

• プロフェッショナルなビデオグラフィーの置き換え
• ビデオファイルの直接編集
• 最終的なクリエイティブジャッジメント
• オーディエンスエンゲージメントの保証

参考資料

ツール

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

チュートリアル

• Dilum Sanjaya: Character to 3D workflows (X/Twitter)
• Three.js Fundamentals: Loading 3D models
• React Three Fiber: useGLTF documentation

研究

• 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