履歴書から 3D ポートフォリオへ

技術解説

• 形象生成 · 自前の Key で使う Tripo 画像から 3D モデル

  サイト側は Tripo の認証情報を一切保持しません。まず Tripo 開発者プラットフォームにログインし、自分名義の API Key を一つ選ぶと、消費クレジットはその Key の所属アカウントに計上されます。Key は現在のタブにのみ一時的に保持され、ページを閉じると失効します。選択後は、履歴書から抽出した写真（別途アップロードした写真、または 7 種類のデフォルト形象でも可）を画像から 3D モデルに渡し、約 2〜3 分で質感のあるテクスチャ付き 3D キャラクターが返ってきます。デフォルト形象は生成自体を行わないため、費用はかかりません。

• 待ち時間は再開できる · ポーリング・クレジット返却・下書き復元

  2 つの待ち時間は扱いが分かれています。履歴書の解析中にページを閉じたり再読み込みしたりすると再アップロードが必要で、その旨はページ上に明記されています。一方、3D 形象の生成は一度始めると取り消せず、同じくページを開いたままにするよう促されますが、うっかり再読み込みしても進捗は自動的に引き継がれます。タスクの状態と完了済みの中間生成物はブラウザー内に保存されるため、戻ればそのまま再開でき、前回やり残した下書きまで復元されます。失敗してもクレジットは失われません。未完了分は Tripo が自動で返却し、そのまま再試行するか別の写真に差し替えられます。

• スクロールで巡る · 1 体のモデルが全画面を貫く

  完成したポートフォリオは Three.js r185 による一本のカメラレールです。先頭にプロフィールカード、中間に複数のコンテンツ画面、末尾に作品ギャラリーが並び、右側の目盛りが現在の画面位置を示します。同じ GLB キャラクターは画面が切り替わっても再読み込みされません。GSAP 3.15 のタイムラインがカメラ位置・キャラクターの姿勢・カードの登場をスクロール進行度に紐づけているため、職歴・スキル・受賞歴が 1 画面ずつ進む間、キャラクターは連続したカメラワークでその中を移動していきます。背景の巨大な文字・テーマカラー・各画面のタイトルはすべて編集可能なフィールドから来ており、変更は即座にプレビューへ反映されます。

• 書き出してそのまま持ち帰る · 2 形態の zip、処理はすべてローカル

  一つの zip に 2 つの形態が入っています。単一ファイルの portfolio.html は、作品集全体とリソースを 1 枚の Web ファイルにまとめたもので、ダブルクリックで開き、チャットやクラウドストレージで送ってもそのまま見られます。代わりにファイルサイズはやや大きくなります。site/ フォルダー版は最小構成で、このディレクトリを GitHub Pages や Vercel に上げればそのまま個人サイトになります。作品画像は jpg / png で最大 8 枚まで、書き出し時に自動圧縮して同梱され、書き出しパネルには画面数とファイルサイズの見積もりが先に表示されます。履歴書そのものはこの 1 回の生成にしか使われずディスクに保存されることはなく、下書きも自分のブラウザーの中だけに残ります。