カプセルトイ形式のポートフォリオサイト

方向性

キャリア紹介を単なる情報列挙ではなく、ユーザーが操作しながら自ら情報に触れられる体験として見てもらえるように意識しました。

取り組み

  • モデルの追加・変更が想定されたため、変更頻度が高くないアニメーションはGSAPで作成
  • カプセルモデルはJSONファイルで制御し、React側で追加・変更しやすいひな形を用意
  • モデルが大きく変わってもプログラム側の修正は不要または微調整で対応可能な構成に分離
  • スマートフォン表示に対応するため、軽量化と動作確認を並行して実施
  • Blenderで作成した透過マテリアルの負荷をGLSLシェーダーに置き換え、描画負荷を軽減
  • より立体感を出すため、効果音を追加

振り返り

3Dモデルの制作と実装の間にある依存関係を意識しながらワークフローを組めたことが学びとなりました。視点固定の場合は動画化による軽量化も有効と気づきましたが、CPUやメモリ負荷との兼ね合いが必要でした。今回はクリックのみの操作でしたが、ドラッグによる回転や物理演算による演出も加えると、よりインタラクティブな体験に広げられそうと感じました。