basement.studio

ブランディングからWebサイト、3D体験、プロダクトまで手がける basement.studio のポートフォリオ。Vercel、MrBeast、Daylight などをクライアントに持ちます。 2025年版のサイトはスクロールするパンフレットではなく、探索できるリアルタイム3D環境として作られています。特筆すべきは、サイト一式が github.com/basementstudio/website-2k25 でオープンソースとして公開されていること。中で使われているテクニックをすべて読めるので、学習素材としての価値が非常に高いサイトです。 構成はNext.js App Routerで、(canvas) というルートグループが (content) を包む形。WebGLキャンバスがコンテンツルートより上位のレイアウトに置かれているため、クライアント遷移してもGLシーンが破棄・再生成されずに持続します。 【参考になるポイント】 ・(canvas) レイアウトでGLシーンをページ遷移をまたいで保持する構造。--canvas-offset というCSSカスタムプロパティと組み合わせ、キャンバスとDOMのレスポンシブな共存を実現している ・依存関係が現在のReact 3Dスタックの見本市になっている：@react-three/fiber v9、drei、@react-three/rapier（剛体物理）、maath、meshline、glsl-noise + glslify-loader ・@react-three/offscreen（transferControlToOffscreen でレンダリングをWorkerへ移し、メインスレッドを空ける）を採用している。通常はクローズドソースでしか見えない部分 ・leva（実行時パラメータ調整GUI）と r3f-perf（描画コール/FPS計測）を同梱。全パラメータをライブで触りながらチューニングする、実際の作業手順がそのまま出ている