Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

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

ReactとThree.jsを一度に!インタラクティブウェブの基礎であるVectorからGSAPまで学べます。3つの事例を一つのポートフォリオに統合するコツとノウハウ!

  • taejaehan
실습 중심
Interactive Web
Three.js
TypeScript
React
webgl

こんなことが学べます

  • ReactとThree.jsを同時に! R3F(react-three/fiber)を学びましょう

  • インタラクティブウェブの基礎となるVectorの概念と演算について学びましょう。

  • 多様な例を通じて理解し、応用して自分だけの作品を作り上げていく講義

  • ベクトル(Vector)の基礎概念から活用、そして深化過程を通じた自分だけのポートフォリオ制作まで!

  • ウェブインタラクティブライブラリGSAPについて学びましょう

  • 一緒に一땀一땀コーディングしながら身につけ、実力をつけることができる講義

  • 注目される開発者になれる Creative Coding / Interactive Web を経験し、実習できる講義

  • 他では見つけられないR3Fスタック学習で、より簡単で楽しく実装する3Dインタラクティブウェブ

  • 現役開発チーム長から学ぶデバッグとリファクタリングの方法!

  • 現役10年目の開発者からプロジェクト構造から実務のコツまで学べる!


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

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)について、誰でも理解しやすく説明します!

ベクトル(Vector)とは何でしょうか?

自社制作の説明資料

難しい概念を図で分かりやすく説明して理解がスッと入る!



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

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

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

ベクトルの活用理論説明

ベクトルの活用実習課題

ベクトルの活用上級コース



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

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

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

Sin / Cos Curveを活用したインタラクティブ例題実習

Three.jsCurveの活用法

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

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

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

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

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

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

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

GSAPを活用したインタラクティブウェブ

ベクター(Vector)を活用した総合インタラクティブポートフォリオプロジェクト

受講前の注意事項📢

実習環境

  • 講義では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日以内にお答えいたします。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • クリエイティブコーディングの基礎を学びたい開発者/デザイナー

  • 人目を引く特別なウェブサイトを作りたい開発者/デザイナー

  • ウェブで3Dを実装したい開発者

  • 他人とは差別化された武器を持ちたい開発者

  • ウェブで面白い試みを始めてみたい開発者/デザイナー

前提知識、
必要でしょうか?

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

  • Reactの基本的な概念を知っている方が望ましいですが、知らなくても大丈夫です。

  • Threejsの基本的な概念をご存知の方が望ましいですが、なくても大丈夫です。

こんにちは
です。

314

受講生

18

受講レビュー

9

回答

5.0

講座評価

2

講座

안녕하세요. 10년차 웹 그래픽 엔지니어 한태재입니다. 저는 기본적으로 풀스택 개발자이지만 프론트앤드에 집중하여 작업합니다 :)

저는 Angular, React등의 프레임워크를 사용해 프론트엔드 개발을 해왔습니다. 하지만 역시 가장 좋아하는 작업은 Threejs, WebGL, D3js , Pixi.js 등 웹(HTML5)에서 2D/3D Canvas 그래픽스를 다루는 프로젝트들 입니다.

저는 새롭고 창의적인 유저경험(UX)를 만드는 인터렉티브한 웹 컨텐츠에 대한 열정이 가득합니다. 같이 재미있는 프로젝트 만들어봐요 !

  

10년차 인터렉티브 3D 프론트엔드 개발자

-(현) 네오위즈 - HTML5 게임 개발자

-(현) 모두의연구소 - Generative art 랩장

-위메이드 - Defi Frontend 개발 팀장

-다비오 - Three.js 개발 팀장

-Dmajor - 시니어 프론트엔드 개발자

-모두의연구소 - Interactiver art of web 랩장

-Addpac - 쥬니어 프론트엔드 개발자

-NHN 네이버 재팬 - UX/UI 디자이너

-매드맨포스트 - CG Effect Artist

-국민대 - 공업디자인 전공

カリキュラム

全体

77件 ∙ (11時間 32分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

3件

5.0

3件の受講レビュー

  • kimkichangsy6908님의 프로필 이미지
    kimkichangsy6908

    受講レビュー 2

    平均評価 5.0

    5

    43% 受講後に作成

    I got started with Three.js while listening to your last lecture. I came running right away when I heard that you released a new lecture. Vectors are still difficult, but... I think I can understand vectors little by little because you taught the lecture considering a beginner's perspective. If I listen to it repeatedly, I think I can apply it in a fun way. Thank you.

    • hansoyoung37277879님의 프로필 이미지
      hansoyoung37277879

      受講レビュー 2

      平均評価 5.0

      5

      6% 受講後に作成

      • parkyeonsoon582789님의 프로필 이미지
        parkyeonsoon582789

        受講レビュー 2

        平均評価 5.0

        5

        19% 受講後に作成

        ¥21,182

        taejaehanの他の講座

        知識共有者の他の講座を見てみましょう!

        似ている講座

        同じ分野の他の講座を見てみましょう!