Blenderで作成したキャラクターがThree.jsで壊れた — 3Dキャラクター実装の回顧

TL;DR

エンジンの限界を理解する: Blenderで完璧に見える構造が、Three.jsでも最適解とは限らない。
結果志向のリギング: リギングは単なる「インポート」ではなく、エンジン向けの「実行可能データへ変換するプロセス」である。
設計の軸: すべての判断基準は「Webランタイム上でいかに効率的に動作するか」に置くべき。

キャラクター制作の出発点：なぜキャラクターが必要だったのか？

FUNDAプロジェクトを進める中で、サービスのコア価値である「楽しさ」と「ゲーミフィケーション」を視覚的に体現する存在が必要でした。
単なる装飾ではなく、ユーザーと情緒的に結びつき、学習意欲を引き出すUXコンポーネントとしてキャラクターを設計しました。

キャラクター選定プロセス

以下の3つの基準でキャラクターを選定しました。

1. 可愛らしさ — 初見の心理的ハードルを下げる
2. 知的な印象 — 学習サービスとの整合性
3. ブランドカラーとの親和性 — 視覚的一貫性

候補検討

• パンダ
  可愛らしさは強いが、「知性」よりも「のんびりした印象」が強く保留

• カワウソ
  親しみやすく、アニメーション設計的にも扱いやすいため候補に残す

• キツネ → ホッキョクギツネ（最終選択）
  知性・学習イメージと親和性が高い → ブランドカラーとの衝突を避けるために決定

スケッチ / 2D設計

3D制作に入る前に、キャラクターの印象とポーズを確定するために簡易的なスケッチと2D実装を行いました。

2Dのみでもサービス運用上は問題ありませんでしたが、
**「クオリティがもう一段欲しい」**というフィードバックを受けました。

結果として、

キャラクターがプロジェクトの成否を左右する要素である

と判断し、3D化へ踏み切りました。

Blender作業：モデリング〜リギング

モデリング & テクスチャリング

人型キャラクターの制作経験をベースに進行。
デフォルメを繰り返し調整しながら精度を高めました。

• 基本：Noiseベースのテクスチャ
• ディテール：Poly Haven素材を使用

1次ヘッド	2次デフォルメ	3次デフォルメ

重点ポイント：目の設計

• 紫 × 白の配色で神秘性を演出
• Transmission + Glass BSDF による屈折表現

→ この設計が後にThree.jsで問題を引き起こす

リギング & Shape Key

• 構造：動物ヘッド + 人型ボディ
• Rigifyベース
• マフラー・尻尾：Damped Trackで揺れ表現

顔は以下で構成：

• 顔メッシュ
• まつげ / 眉毛
• 舌 / 歯
  → それぞれShape Keyで制御

🚨 Three.js移行で崩壊

問題1 — Modifierが適用されない

• Three.jsはModifierをリアルタイム計算しない
• Apply必須

しかし：

Shape Key付きメッシュはSubdivisionが適用不可

→ プラグイン（SKKeeper）で強制適用

問題2 — Constraint / Controllerが無効

• IK / Constraint → 完全無視
• Controller → 存在ごと無視

つまり：

Blenderの「操作系」はエクスポートされない

デバッグプロセス（5段階）

1. ボーン存在確認
2. マッピング確認
3. 可視化（ポイント描画）
4. Transformログ
5. 最終レンダリング確認

結果

すべて正しく動いているが、画面に反映されない

結論

Rigify構造はThree.jsで直接制御不可

目のマテリアル再設計（重要）

問題

Blender：

• Glass + Transparent
• Alpha微調整

Three.js：

• Alphaが「物理表現」として解釈されない
• → ただの穴になる

解決：ランタイムMaterial Override

→ Web上でガラス表現を再構築

解決戦略：構造を再設計

① アニメーションベイク

• Constraint削除
• Keyframe化

② 役割分離

③ useFixSkinnedMesh

問題：

• Frustum誤判定
• Bounding不正
• Morph未初期化

対策：

最終結果

• 安定したレンダリング
• インタラクション実装成功

回顧と教訓

1. エンジン非互換

Blender ≠ Three.js
→ 機能の持ち込みは成立しない

2. Web最適化優先

• Modifier → Bake
• Constraint → 排除

3. デバッグは構造化する

• Bone → Transform → Render

4. マテリアルは再設計前提

• Blenderノード ≠ Webレンダリング
• → Runtime Materialで再構築

最終結論

3Dキャラクター制作はモデリングではなく「実行環境設計」である

• #振り返り
• #Three.js
• #モバイル最適化
• #アニメーション
• #最適化