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

講義テーマ 📖

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

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

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

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

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

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

他では見られないR3Fスタックの学習で、より簡単かつ楽しく3Dウェブサイトを作ってみましょう！

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

この講座はどのような方におすすめですか？

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

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

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

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

• Web 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基礎についての説明 >

実際の撮影現場やアニメーション制作セットと比較して、理解がスイスイ進む！

実際の環境と同じウェブ3D環境についての理論説明！

< Geometry, Material >

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

<3D web E-commerce project>

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

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

よくある質問 Q&A 💬

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

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

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

受講前のご案内 📢

実習環境

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

学習資料

• 각 섹션별 소스코드 압축 파일 제공 ( zip ) 
  
  • 0、2、3、4、5、6、7講 + 実務プロジェクト
  • 靴の3Dモデリングファイルを提供

事前知識および注意事項

• JavaScriptの基礎をご存知の方であれば可能です。
• Reactに関する基礎概念がある方なら望ましいですが、なくても大丈夫です。
• ご質問いただいた内容は、早ければ当日、遅くとも3日以内に回答いたします。
• Web 3D Eコマースプロジェクトに関する内容が継続的にアップデートされています。

講師紹介 ✒️

こんにちは。10年目のウェブグラフィックエンジニア、ハン・テジェです。私は基本的にフルスタックエンジニアですが、フロントエンドに集中して作業しています :)

私はAngularやReactなどのフレームワークを使用してフロントエンド開発を行ってきました。しかし、やはり一番好きな作業はThree.js、WebGL、D3.js、Pixi.jsなど、ウェブ(HTML5)で2D/3D Canvasグラフィックスを扱うプロジェクトです。私は新しく創造的なユーザー体験(UX)を生み出すインタラクティブなウェブコンテンツに対して情熱に溢れています。一緒に面白いプロジェクトを作りましょう！

経歴事項/ポートフォリオ・個人動画

• 10年目のインタラクティブ3Dフロントエンドエンジニア
• (現) ネオウィズ - HTML5 ゲーム開発者
• (現) みんなの研究所 - Generative art ラボ長
• ウィメイド - Defi フロントエンド開発チーム長
• Dabeeo - Three.js 開発チームリーダー
• Dmajor - シニアフロントエンド開発者
• 모두の研究所 - Interactiver art of web ラボ長
• Addpac - ジュニアフロントエンド開発者
• NHN ネイバージャパン - UX/UI デザイナー
• マッドマンポスト - CG Effect Artist
• 国民大 - 工業デザイン専攻