作者: 桌子
ライブで試す このプロジェクトについて
Maya Bennettは、架空のグラフィックデザイナーを描く全6章の3D履歴書です。4つのTripo製フルーツモデルが経歴、学歴、キャリア、専門分野のパネル間を漂い、スクロールに合わせてインポートしたカメラアニメーションが前後に進みます。
WebGLレイヤーはHTMLの履歴書から分離されているため、3Dシーンがなくてもストーリーを読み進めたりスキップしたりできます。その下では、ブランディング、パッケージ、エディトリアルデザインの6つのプロジェクトが個別の詳細ビューで開き、Color Labから最終的なルックを支えるライティング、フォーカス、マテリアルの設定を操作できます。
体験ポイント
- インポートしたカメラアニメーションとともに、履歴書の6つの章をスクロールして進みます。上へ戻ると、同じ旅程が自然に逆再生されます。
- 4つの浮遊するフルーツモデルのいずれかをドラッグして慣性をつけて回し、その後シーン内の位置へ落ち着いて戻る様子をご覧ください。
- Color Labを開くと、露出、被写界深度、EXRライティング、各フルーツのマテリアルをリアルタイムで調整できます。
- 続いて、厳選されたブランドアイデンティティ、パッケージ、エディトリアルデザインの6つのプロジェクトを、それぞれの詳細ビューでご覧いただけます。
技術解説
3Dアセット · Tripo製フルーツモデル
バナナ、トマト、イチゴ、リンゴは4つのGLBアセットとして提供され、そのシーンノードとマテリアルにはTripo識別子が付いています。React Three Fiberは単一の共有コンポーネントを通じて各アセットを読み込み、スケール、位置、浮遊モーション、フォーカスオフセットはシーン設定で管理します。
スクロール演出 · GSAP + アニメーションカメラ
GSAP ScrollTriggerは履歴書のスクロール進行度を0〜1の単一タイムラインに対応づけます。インポートしたカメラGLBを5秒に正規化し、フレーム0、60、120、180、240、300でサンプリングすることで、各章に正確に到達し、上方向へスクロールすると逆再生されます。
フルーツ操作 · クォータニオンによるドラッグと復帰
ポインターの動きでクォータニオン回転と上限付きの角速度を制御します。指やボタンを離した後も各フルーツは短時間だけ慣性で回転し、その後は減衰によって設定済みのポーズへ戻り、自動モーションが徐々に再開します。同じポインター操作がマウスとタッチの両方で機能します。
映画的な仕上げ · EXRライティング、オートフォーカス、Color Lab
EXRの空がPMREMを介してPBRマテリアルを照らし、固定の25mmカメラは4つのフルーツのグループとアクティブな被写体の間でフォーカスを切り替えます。BokehPass、ブルーム、カラーグレーディングが画面を仕上げ、Color Labではこれらの設定をリアルタイムで操作できます。
