R3F(React + Three.js / Typescript)でインタラクティブなポートフォリオを作る

あなたはウェブサイトを作ることが楽しいですか？

Webサイトの掲示板を作ったり、ポップアップウィンドウを開発したりする作業にうんざりしていませんか？

他の人と差別化されたウェブプロジェクトを作りたいですか？

あなたの会社で華やかで目立つ、他とは違うウェブサイトを作ってみようと言われていますか？

このWebサイトはどうやって作ったの？WOWなサイトを作ってみたいですか？

今回の講義は

コーディングで機能的なものを作るよりも表現的なものに集中して、様々な表現方法を研究し

その過程で予想外の結果の発見、変形を目標とするCreative Codingを扱っています。

その中でもInteractive Codingの最も核心であるベクター（Vector）について学ぶことができ

それを活用して差別化されたポートフォリオを作ることができます。

講義テーマ📖

• 使用技術：frontend DOM（React、gsap）/ webgl（Three.js）

  
  

この講義ではフロントエンドで最も多く使われる React フレームワークと

Web Graphic(webgl)で最も多く使われているライブラリであるThree.jsを

一度に扱うことができるR3F（React Three Fiber）を学ぶことになります。

あなたは華麗なインタラクティブウェブ + Creative Codingの最も重要な概念であるベクター（Vector）について

集中的に学ぶことになり、ベクター（Vector）を理解してうまく活用すれば

あなたが望むインタラクティブな動きをすべて作ることができるでしょう。

どこでも見つけることのできないR3Fスタック学習で

より簡単で楽しくインタラクティブポートフォリオウェブサイトを作ってみます。

ウェブ3Dインタラクティブ専門、現職10年目のウェブグラフィックエンジニア（Web Graphic Engineer）/ フロントエンド開発者（Frontend Developer）の経験とノウハウをすべて詰め込みました。

講義の特徴✨

ReactとThree.jsを一度に！React Three Fiber(R3F)！

Interactive Codingの基礎であるベクトル(Vector)の概念から

実務で使える様々な例題と総合プロジェクト、そして最適化のコツまで！

-Javascript基礎について理解されている方であれば受講可能です。

-Reactの基礎概念をお持ちの方であれば良いですが、なくても大丈夫です。

-ベクター（Vector）の基礎概念から活用、そして上級課程を通じたポートフォリオ制作まで！

-Web 3Dを扱いますが、講義では2Dカメラ(orthographicCamera)を使用して作業します。

-実務ですぐに使えるようにTypescriptで講義を進め、サンプルコードを共有します。

-各セクションごとに理論中心の重要な基礎概念を説明（10~25%）

-各セクションごとに一針一針一緒に行う実習中心の講義（75～90%）

この講義を通じて、ReactとThree.js（WebGL）を一度に扱うことができるR3Fについて学ぶことができます

ます。そして、あなたはCreative Codingの基礎であるベクター(Vector)とは何か、どのように使用できるかについて

について学び、Vectorを使用して動く4つの例題を扱うことになります。Vectorの基礎を固めれば望む

すべての動きについて作ってみることができます。

また、インタラクティブウェブの必須であるGSAPについて学ぶことができ、スクロールすると華やかに動く3Dウェブを

作ることができます。単純に美しいだけの画面ではなく、リアルタイムで反応し動く3Dオブジェクトの

アニメーションについて学んでみましょう！各段階に適した実習まで直接一緒に一針一針コーディングしながら身につけて実力を

積み重ねることができる講義です。

この講義を通じて単純な静的ウェブから脱却し、リアルタイムレンダリングを活用した動的で創造的なプロジェクトを作って

見てください！段階的に従っていくうちに、いつの間にかあなたのプロジェクトがまるでゲームのように生き生きと動いているのを感じることでしょう

あると思います！

どこでも見つけることのできないR3Fスタック学習で、より簡単で楽しく3Dポートフォリオウェブサイトを作ってみましょう！

学習内容📚

1. Creative Codingの基礎中の基礎！3Dウェブサイトの基礎中の基礎！

ベクトル(Vector)！について段階的に学んでいきます。

最も基礎的でありながら最も重要な概念であるベクトル（Vector）について、誰でも理解しやすく説明します！

2. 直接コーディングして一緒に実習しながら、ベクターを使用する方法について学びます。

理論を基礎として一針一針一緒にコーディングしながら学習しよう！

可愛い「クマちゃんとハチミツ」の例とボックスで跳ねるボール(Ball)の例を通して学んでみます。

3. ベクター(Vector)を学んだので、今度はカーブ(Curve)について学んでみましょうか？

Creative Codingでよく使われる概念であるSin / Cos / Tan などのCurveについて学んでみて

R3F(Three.js)のCurveを活用したインタラクティブなコーディング実習まで進めてみます。

4. インタラクティブなウェブサイトに欠かせないGSAPライブラリについて学び

マウススクロールイベントでインタラクティブな3Dワールドをコントロールします。

これまで学んだベクトル（Vector）の基本を活用して応用課程まで学習する総合例題！

ボール(Balls)同士がぶつかり合い、重力によって落下し、マウスに反応する総合プロジェクト！

プロジェクト構造をどのように構成し、デバッグできるでしょうか？実務ではどのようにコーディングするのでしょうか？

一歩一歩、一つずつ一緒に学びながら一緒に完成させるインタラクティブウェブポートフォリオ作り！！

DEMO: https://cclab.taejaehan.com/

受講前の注意事項📢

実習環境

• 講義ではmacOS - Apple チップを使用しますが、mac intelチップまたはwindow環境でも可能です。

• 使用プログラム：Chrome、vscode、npm(node)、r3f等

• PC仕様：CPU 2.0GHz以上、RAM 8GB以上、WebGL対応グラフィックを推奨します

学習資料

• 各セクション別ソースコード圧縮ファイル提供（zip）

  • セクション1、2、3 理論及び開発環境設定

  • セクション4、5、6、7実習プロジェクト（ソースファイル提供）

  • セクション8、9、10総合実務プロジェクト（ソースファイル提供）

    
    

  
  

前提知識および注意事項

• JavaScriptの基礎をご存知の方であれば可能です。

• Reactの基礎概念をお持ちの方であれば良いですが、なくても大丈夫です。

• 3Dの基礎とThree.jsの入門程度の経験をお持ちの方が受講されることをお勧めします。

  
  

• 今回の講義では、Scene、Camera、Renderer、Mesh、Geometry、Material、Light等の3Dの基礎については説明しません。もし

  3Dの基礎について学びたい方は、Inflearnの私の講義「React Three fiber(R3F)で学ぶインタラクティブ3D Web開発」https://inf.run/XAE71を先に受講してから、今回の講義を受講することをお勧めします😊

  
  

• ご質問いただいた内容については、早ければ当日、遅くとも3日以内にお答えいたします。