Face Portfolio — 3Dキャラクターと共に魅せるポートフォリオ
作成者: 神部凱斗 (Kanbe Kaito) | Role: Frontend Engineer | Year: 2025 | Type: Personal Project
概要
Three.js を活用した3Dキャラクターアニメーションをメインビジュアルに据えたポートフォリオサイト。スクロールに連動してキャラクターが切り替わり、サイト全体でインタラクティブな体験を提供します。
主な機能
- セクション連動3Dモデル切り替え（4体）
- Draco圧縮でモデルを最大86%軽量化
- ホバー・クリックでエミッシブグロー演出
- スクロール型・パネル型の2レイアウト
- Works Admin（GitHub自動push対応）
技術ハイライト
- GLTFLoader + DRACOLoader による効率的なモデルロード
- UnrealBloomPass でシネマティックなブルーム効果
- Raycasting によるメッシュ単位のインタラクション
- IntersectionObserver でスクロール連動アニメーション
- Express API + GitHub REST API でコンテンツ管理
技術スタック
Three.js / GLSL / Express.js / GitHub API / Vanilla JS / CSS
Live: kaito-kanbe.com | GitHub: github.com/KaitoS828/portforio
作成者ポートフォリオ: kaito-kanbe.com