ReactとThree.jsを一度に！3Dの基礎から、実務で使用できるプロジェクト、そして最適化のヒントまで！
ウェブ3Dの基礎について学びます。
ReactとThree/jsを一度に！R3F（react-three/fiber）を学びましょう
多様な例を通じて理解し応用し、自分だけの作品を作り上げていく講座
一緒に一땀一땀コーディングしながら身につけ、実力をつけることができる講義
目を見張る開発者になるための3D概念を習得する講座
他では見つけられない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環境に関する理論説明！
< Geometry, Material >
様々な形のオブジェクトと素材、そして光と影まで！
.gif)
<3D web Eコマースプロジェクト>
実務ですぐに使えるプロジェクト、そして最適化のコツまで！
DEMO : https://ecommerce.taejaehan.com/
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サイトを一緒に作ってみましょう！
こんにちは。10年目のウェブグラフィックエンジニアのハン・テジェです。私は基本的にフルスタック開発者ですが、フロントエンドに集中して作業しています :)
私はAngular、Reactなどのフレームワークを使用してフロントエンド開発を行ってきました。しかし、やはり最も好きな作業は、Threejs、WebGL、D3js、Pixi.jsなど、ウェブ（HTML5）で2D/3D Canvasグラフィックスを扱うプロジェクトです。私は新しく創造的なユーザーエクスペリエンス（UX）を作るインタラクティブなウェブコンテンツに対する情熱に満ちています。一緒に面白いプロジェクトを作りましょう！
学習対象は
誰でしょう？
JavaScriptの基本をご存知の方であれば可能です。
Reactの基本的な概念をご存知であれば望ましいですが、知らなくても大丈夫です。
前提知識、
必要でしょうか？
JavaScript
317
受講生
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
-국민대 - 공업디자인 전공
全体
63件 ∙ (10時間 1分)
講座資料（こうぎしりょう）:
全体
15件
5.0
15件の受講レビュー
受講レビュー 6
∙
平均評価 5.0
受講レビュー 2
∙
平均評価 5.0
5
Lúc đầu, tôi đăng ký tham gia bài giảng sau khi xem người hướng dẫn trên YouTube và tôi nghĩ đó là một bài nghe hay. Tôi rất vui vì bạn đã giải thích chi tiết. Thật tốt khi bạn nỗ lực cung cấp nhiều tài liệu và ví dụ khác nhau để dễ hiểu hơn. Ngoài các ví dụ, tôi nghĩ điều đó tốt vì chúng giải thích những việc cần làm khi bạn muốn làm thứ gì đó khác bằng cách xem tài liệu chính thức. Họ cho bạn cá nhưng lại tự mình bắt cá? Thật tốt khi bạn giải thích phương pháp ... Haha, bài giảng có vẻ hơi lúng túng vì có lúc người nói ngừng nói hoặc nghĩ ‘hmm~’, nhưng điều đó không làm tôi bận tâm. Vui lên! Cảm ơn !
受講レビュー 1
∙
平均評価 5.0
5
Tôi luôn quan tâm đến 3D, nhưng khi theo dõi, tôi bắt đầu cảm nhận được nó từng chút một. Tôi nghĩ tôi có thể làm được nhiều điều thú vị. Cảm ơn bạn vì bài giảng tuyệt vời!
Cảm ơn bạn đã đánh giá và đánh giá tuyệt vời, Imha! Tôi rất vui vì bạn đã hiểu rõ. Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng để lại chúng :>
受講レビュー 2
∙
平均評価 5.0
5
Không sao đâu vì bạn bình tĩnh giải thích từng khái niệm một nhé. Tốt cho việc tạo các khái niệm cơ bản về web 3D
Cảm ơn bạn đã đánh giá tuyệt vời, Gichang! Tôi sẽ cố gắng hết sức và làm cho nó tốt hơn!
受講レビュー 1
∙
平均評価 5.0
￥15,558
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![[Code Factory] [Cơ bản] Khóa học hoàn chỉnh Typescript của Code Factory chỉ trong 8 giờCourse Thumbnail](https://cdn.inflearn.com/public/courses/330970/cover/3c24c2b8-9dc1-44ed-af4e-2b58542a6504/330970-eng.png?f=avif&w=420)
![[Phát triển GUI JavaScript #1] Ứng dụng Timer được tạo bằng Electron + React (+ Zustand)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
![[Sửa đổi lần thứ 3] Sách giáo khoa Node.js - Từ cơ bản đến thực hành dự ánCourse Thumbnail](https://cdn.inflearn.com/public/courses/330181/cover/47e0125e-75ad-4946-96d3-54bbc444a188/330181-eng.jpg?f=avif&w=420)
![Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] BootcampCourse Thumbnail](https://cdn.inflearn.com/public/courses/333180/cover/26ede6df-032a-40f2-9670-f6748785eba5/333180.jpg?f=avif&w=420)
![[Code Factory] [Cơ bản] Khóa học hoàn chỉnh về NestJS REST API Backend - NestJS CoreCourse Thumbnail](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
