今回は現在私が制作しているNext.jsのポートフォリオサイト制作に使われている主要技術とこれからの設計についてお話していきます。
この記事を読むことでNext.jsを学習してみたいやプログラミングの学習の参考にもなりますので最後まで読んでみてくださいね。
🧱 使用した主な技術と目的
技術用途Next.js ルーティングやビルドが楽なReactベースのフレームワーク。SEO対策にも強い。
Three.js / React Three Fiber3Dモデルやアニメーションの描画をJSで制御。Three.jsのReact版。
DreiReact Three Fiberの補助ライブラリ。
Text, OrbitControls, useGLTFなどの便利なコンポーネントが揃っている。
GLBモデル 蝶やカーソル、アクセサリーなどの3Dモデルを表示。
CSS Modules / グラデ背景module.cssで自然な色合いの背景を設定。ページ全体のトーンを統一。
dynamic importクライアントサイドのみでThree.jsを動かすためのssr: false設定。
🦋 実装した機能と解説
1. 回転するメインモデル（main.glb）
useFrame(() => { if (ref.current) { ref.current.rotation.y += 0.01 } })
copy
🔁 useFrame を使って、フレームごとにメインモデルを回転させています。
2. 公転するサブモデル（small.glb）
const angle = (index / total) * Math.PI * 2 + t * speed const x = Math.cos(angle) * radius const z = Math.sin(angle) * radius
copy
🌀 数学関数（cos/sin）を使って、モデルが円軌道で動くようにしました。
🌊 y = Math.sin(...) で上下に羽ばたくアニメーションも追加。
3. 3Dテキストの表示（Butterfly Fieldなど）
<Text font="/fonts/Roboto-Bold.ttf" fontSize={20} color="white" > Butterfly Field </Text>
copy
🧵 Drei の Text コンポーネントで、GLBモデルの前に3D文字を浮かべるようにしました。フォントも変更可能です。
4. カーソルをGLBモデルに置き換え（mouseover.glb）
💡マウスの位置にモデルを追従させ、クリックイベントなどに反応するように。window.addEventListener('mousemove', ...)でマウス座標を取得 → Three.js座標に変換して表示。
5. 3Dヘッダーリンク（Home, Service, Product, Contact）
<Text onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} > Home </Text>
copy
✨ ホバー時に ref.current.rotation.y += 0.1 で文字が1回転し、色も変化するインタラクションを実装。
6. 自然なグラデ背景 + 商品カードの一覧ページ（Product.tsx）
🛍️ 商品を 350x350 のカードで3列 × 3段に並べ、商品画像・タイトル・説明も横並びにレイアウト。
7. ページ構成とファイル管理
ファイル名内容index.tsxトップページ。HeaderとModelViewerを表示。Header.tsx3Dテキストリンクで構成されたヘッダー。ModelViewer.tsxメイン・サブモデル、3Dテキストなどを表示するCanvas。Product.tsx商品一覧ページ。3段×3列のカードとカテゴリリンクなど。
💡 学びポイントまとめ
概念ポイントReactコンポーネント設計UIを部品ごとに分けて再利用しやすく。Three.js空間と座標Three.jsのx/y/z座標とCSSの位置は異なる。正確にコントロールする必要あり。アニメーションuseFrame() や sin/cos を使えばスムーズで自然な動きが実現できる。インタラクションonPointerOver, onClick, hover状態 などでリアクティブに反応。モデル配置.glbを useGLTF()で読み込んで、clone() すれば複数表示もOK。
✍️ 今後の学習・実装のアイデア
レスポンシブ対応（スマホでも操作しやすい設計）
ローディングアニメーション
商品ページに購入ボタンやカート連携
お問い合わせフォーム + バリデーション
アニメーションライブラリ（GSAPなど）との併用
