Kiki World
Kiki World
アニメーションするアバターと一緒に遊び心のある世界を巡る、物語仕立ての3Dスタジオ。
ReactThree.jsR3F3Dアニメーション
“洗練され、快適に動くインタラクティブな3D体験を構築できます。”
01
課題
複数のThree.js実験を、明確な導線と目的を持つ一つの体験にまとめること。
02
担当
クリエイティブディレクション、インタラクション設計、3Dフロントエンド設計、アニメーション、アクセシビリティ、パフォーマンス改善。
03
制約
デスクトップでは豊かな表現を保ちながら、タッチ端末でも操作でき、視差効果を減らす設定を尊重し、描画性能が限られる端末でも体験を成立させる必要がありました。
04
プロセス
部屋を物語の構造にし、アバターをその訪問者として統合。キーボード、ポインター、タッチの入力を共通化し、意図のあるカメラ遷移と操作ヒントで各空間を分かりやすく設計しました。
05
成果
KikiがMake、Rest、Connectの3部屋を歩いて巡り、衣装を変え、部屋ごとの活動へ自然に移るレスポンシブな3D体験になりました。カメラと描画品質も端末に合わせて適応します。
体験のポイント
- 異なる物語、照明、アバター活動を持つ3つの探索可能な部屋
- 歩行、手振り、タイピング、着席、ダンス、待機を滑らかにつなぐアニメーション
- 現在の部屋と移動状態を保ったまま切り替えられる4種類の衣装
- ホイール、キーボード、クリック、スワイプ、タッチ、モバイル用ナビゲーション
- 読み込み進捗、モーション軽減、手動／自動パフォーマンスモード
設計とパフォーマンス
- Next.jsとTypeScriptのアプリ基盤にReact Three FiberとThree.jsを統合
- Mixamoクリップの水平方向ルートモーションを除去し、アバターを目的の部屋に正確に配置
- 縦画面、横画面、高さの低い画面に合わせてカメラ構図を調整
- Adaptive DPRとパフォーマンス監視で継続的なフレーム低下時に描画負荷を軽減
- 実際に使う6本のアニメーションクリップだけを配信し、GLBアセットを事前読み込み
