【Next.js × Three.js】React Three Fiberで作るスクロール連動型3Dポートフォリオ

本コースにはAIの使用が含まれています。

コースの概要

ポートフォリオが平面的なグリッドのデザインだけで終わっていませんか。

本講座では、Next.js App Router と React Three Fiber を駆使して、スクロールに連動してダイナミックに変化する3Dポートフォリオを構築します。単に3Dモデルを表示するだけでなく、線形補間 Lerp を用いたシネマティックなカメラワークや、パーティクルによる奥行きのある背景、そしてHTML要素と3D空間の完璧な同期を学びます。プロの現場で求められる演出技法を、ステップバイステップでマスターしましょう。

このコースで学べること

• Next.js への3D実装: App Router 環境で React Three Fiber を最適に動作させる手法。

• シネマティックなカメラシステム: スクロール位置に合わせてカメラが自在に移動や回転をする高度な演出ロジック。

• 表現力を高める3D演出: MeshDistortMaterial やパーティクル、フォグを使用して奥行きと没入感を演出する技術。

• HTMLインターフェースの統合: 3Dキャンバス内に自己紹介や制作実績などのDOM要素を同期させ、アニメーションさせる方法。

• レスポンシブとパフォーマンス最適化: モバイル端末向けの調整や、Preload によるアセットの事前読み込み。

• Vercelへのデプロイ: 開発したプロジェクトを世界中に公開する全工程。

このコースの対象受講者

• 一歩先を行きたいフロントエンドエンジニア: Reactの基礎は理解しており、よりクリエイティブな表現に挑戦したい方。

• インパクトのある実績を作りたい方: 採用担当者の目に留まる、圧倒的な没入感を持つポートフォリオを制作したい方。

• Three.jsをより直感的に学びたい方: 数学的な難解さではなく、Reactのコンポーネントベースで効率的に学びたい方。

• Webデザイナー: コードを用いて、自身のデザインに動きと奥行きを加えたい方。

講座の構成と特徴

• 完全ハンズオン形式: ゼロから環境構築を行い、最終的にVercelで公開するまでをナビゲートします。

• オンラインIDEの活用: CodeSandbox を使用するため、複雑な設定に時間を取られず、すぐにブラウザ上で開発を開始できます。

• 実用的な設計: Experience コンポーネントによるシーン管理など、再利用性の高い設計を伝授します。

受講にあたっての要件

• HTMLやCSSの基礎知識。

• JavaScript ES6以降の基礎知識。

• Reactの基本的な使い方やフックの理解。

• Three.jsや3D数学の知識は不要です。

スクロールするたびに物語が動き出すような、最高の一作を一緒に作り上げましょう。