React Three Fiber(R3F)で学ぶインタラクティブ3Dウェブ開発

講義テーマ 📖

メタバース、XR（VR、AR）、ウェブ（HTML5）ゲーム、ブロックチェーンなどの産業によって

華やかなインタラクションがある2D/3D Webコンテンツの需要が急増しています。

また就職市場でもフロントエンド開発 + ウェブグラフィックエンジニアに対する需要が急増しています。

単純なウェブサイトではなく、華やかなインタラクションがある2D/3Dサイトに対するニーズは続くでしょう。

しかし、ゲーム開発者やUnity開発者向けの3D講座は多いですが、Web 3Dに関する講座はあまりにも不足しています。

あなたはReactとThree.jsを一度に学び習得できるR3F（React Three fiber）について学ぶことになります。

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

受講対象/講義目的 🙆‍♀️

この講義は誰が受講すると良いでしょうか？

• 目立つ特別なウェブサイトを作りたい開発者/デザイナー
• Webで3Dを実装したい開発者
• 他の人とは差別化された武器を持ちたい開発者
• ウェブで面白い試みを始めてみたい開発者/デザイナー

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

• Webサイトの掲示板を作ったり、ポップアップウィンドウを開発したりする作業、飽きませんか？
• 他の人と差別化されたWebプロジェクトを作りたいですか？
• あなたの会社で華やかで目立つ、他とは違うウェブサイトを作ってみようと言われていますか？
• このWebサイトはどうやって作ったの？WOWなサイトを作ってみたいですか？

この講義を受講しながらあなたは

• ウェブ3Dの基礎について学ぶことになります
• ReactとThree.jsを一度に！R3F（react-three/fiber）の扱い方を学ぶことになります
• 一緒に一針一針コーディングしながら学び、実力を積むことができる講義
• 現職開発チームリーダーから学ぶ実務のコツと最適化手法

講義の特徴 ✨

ReactとThree.jsを一度に！React Three Fiber(R3F)
3Dの基礎から実務で使えるプロジェクト、そして最適化のコツまで！

• Javascript基礎について理解されている方であれば受講可能です。
• Reactの基礎概念をお持ちの方であれば良いですが、なくても大丈夫です。
• Web 3Dに関する知識は全くなくても大丈夫です。何も知らないと仮定して基礎から説明します。
• 実務ですぐに使えるようにTypescriptで講義を進め、サンプルコードを共有します。
• 各セクションごとに理論中心の重要な基礎概念を説明（10～25%）
• 各セクションごとに一針一針一緒に行う実習中心の講義（75～90%）

学習内容 📚

< 面白い3D基礎についての説明 >

実際の撮影現場、アニメーションを作るセットと比較して理解がすいすい！

実際の環境と全く同じWeb 3D環境に関する理論説明！

< Geometry, Material >

様々な形のオブジェクトと素材、そして光と影まで！

<3D web Eコマースプロジェクト>

実務ですぐに使えるプロジェクト、そして最適化のコツまで！

DEMO : https://ecommerce.taejaehan.com/

予想質問 Q&A 💬

Q. 完全初心者の非専攻者です。講義を受講したいのですが、私のような非専攻者でも講義を聞いて理解できるでしょうか？
A. こんにちは！私の考えでは、非専攻者でもJavaScriptの基礎をご存知であれば、授業を受講されても付いていくのに全く問題はないと思います。もしJavaScriptをご存知でなければ、後半になると少し難しくなるかもしれませんが、これも人それぞれだと思います。分からない部分は他の無料講義やGoogleで調べながら学習される方も見かけました。もし分からない部分が出てきましたら、遠慮なくどんどん質問してください！

Q. 講義を受講する際に事前に準備したり必要なものはありますか？
A. 事前に準備していただくものは、講義を聞きながら実際に試していただけるコンピュータ（MacまたはWindows）です。その他に必要なツールはすべて無料でインターネットからダウンロードできます。Chrome、vscode、npm、blenderなどです。そして必要な資料やリソース、そして講義で使用されたコードはすべてダウンロードできるよう準備しています。

Q. なぜReact Three Fiber(R3F)を学ぶべきなのでしょうか？
A. 現在のWeb開発ではReactが主流と言えるでしょう。しかし、Reactだけでは他の人と差別化できないと思います。そこで、最近そして今後も継続的に発展していかざるを得ないWeb 3Dという武器を身につければ、他の人と差別化された自分だけのロードマップを作ることができると思います！また、メタバース、XR（VR、AR）、Web（HTML5）ゲーム、ブロックチェーンなどの産業により、華やかなインタラクションがある2D/3D Webコンテンツに対する需要が急増しています。そのため、単純なWebサイトではなく、華やかなインタラクションがある2D/3Dサイトに対するニーズは続くでしょう。それに伴い、3D Web開発者の需要も徐々に増加しています。目立つ、他とは違うWebサイトを一緒に作ってみましょう！

受講前の参考事項 📢

実習環境

• 講義ではmacOS - Apple チップを使用しますが、mac intelチップまたはwindow環境でも可能です。
• 使用プログラム：Chrome、VSCode、Blender など
• PC仕様：CPU 2.0GHz以上、RAM 8GB以上、WebGL対応グラフィックを推奨します

学習資料

• 各セクション別ソースコード圧縮ファイル提供（zip）
  
  • 0、2、3、4、5、6、7講 + 実務プロジェクト
  • 靴の3Dモデリングファイル提供

前提知識および注意事項

• JavaScriptの基礎をご存知の方であれば可能です。
• Reactの基礎概念をお持ちの方であれば良いですが、なくても大丈夫です。
• ご質問いただいた内容については、早ければ当日、遅くとも3日以内にお答えいたします。
• ウェブ3Dイーコマースプロジェクトに関するコンテンツが継続的に追加アップデートされています。

知識共有者紹介 ✒️

こんにちは。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
• 国民大学 - 工業デザイン専攻