Phát triển web 3D tương tác với React Three Fiber (R3F)

Chủ đề bài giảng 📖

Bởi các ngành công nghiệp như metaverse, XR(VR, AR), game web(HTML5), blockchain, v.v.

Nhu cầu về nội dung web 2D/3D với tương tác ấn tượng đang tăng mạnh.

Ngoài ra, nhu cầu về lập trình viên frontend + kỹ sư đồ họa web trong thị trường việc làm cũng đang tăng mạnh.

Nhu cầu về các trang web 2D/3D có tương tác phong phú thay vì chỉ là những trang web đơn giản sẽ tiếp tục tồn tại.

Tuy nhiên, có rất nhiều khóa học 3D dành cho nhà phát triển game và nhà phát triển Unity, nhưng các khóa học về 3D web lại quá thiếu.

Bạn sẽ học về R3F (React Three Fiber), nơi bạn có thể học và thành thạo React và Three.js cùng một lúc.

Hãy tạo website 3D dễ dàng và thú vị hơn với việc học R3F stack mà bạn không thể tìm thấy ở đâu khác!

Đối tượng học viên/Mục đích khóa học 🙆‍♀️

Khóa học này phù hợp với ai?

• Nhà phát triển/thiết kế muốn tạo ra trang web đặc biệt nổi bật
• Nhà phát triển muốn triển khai 3D trên web
• Nhà phát triển muốn có vũ khí khác biệt so với người khác
• Các nhà phát triển/thiết kế muốn bắt đầu những thử nghiệm thú vị trên web

Bạn có thấy vui khi tạo ra các trang web không?

• Bạn có cảm thấy chán khi phải tạo bảng tin trang web và phát triển cửa sổ popup không?
• Bạn có muốn tạo ra một dự án web khác biệt so với những người khác không?
• Công ty của bạn có muốn tạo ra một trang web nổi bật, bắt mắt và khác biệt so với những trang khác không?
• Trang web này được tạo ra như thế nào? Bạn có muốn tạo một trang web WOW không?

Khi nghe bài gi강 này, bạn sẽ

• Bạn sẽ học về những kiến thức cơ bản của Web 3D
• Học React và Three.js cùng một lúc! Bạn sẽ học cách sử dụng R3F (react-three/fiber)
• Khóa học giúp bạn học hỏi và nâng cao kỹ năng thông qua việc cùng nhau lập trình từng dòng code một cách trực tiếp
• Học các mẹo thực tế và phương pháp tối ưu hóa từ trưởng nhóm phát triển đang làm việc

Đặc điểm khóa học ✨

React và Three.js cùng một lúc! React Three Fiber(R3F)
Từ cơ bản 3D đến dự án có thể sử dụng trong công việc thực tế và cả các mẹo tối ưu hóa!

• Nếu bạn có hiểu biết về kiến thức cơ bản Javascript thì có thể tham gia khóa học.
• Tốt nhất là bạn đã có kiến thức cơ bản về React, nhưng không có cũng không sao.
• Bạn hoàn toàn không cần có kiến thức gì về Web 3D cũng được. Tôi sẽ giả định rằng bạn chưa biết gì và giải thích từ những kiến thức cơ bản.
• Tiến hành bài giảng bằng Typescript và chia sẻ mã code ví dụ để có thể sử dụng ngay trong công việc thực tế.
• Mỗi phần giải thích các khái niệm cơ bản quan trọng tập trung vào lý thuyết (10~25%)
• Mỗi phần đều có bài giảng thực hành từng bước một cùng nhau (75~90%)

Nội dung học tập 📚

< Giải thích về những kiến thức cơ bản 3D thú vị >

Hiểu rõ ràng khi so sánh với trường quay thực tế và bối cảnh tạo hoạt hình!

Giải thích lý thuyết về môi trường web 3D giống hệt như môi trường thực tế!

< Hình học, Vật liệu >

Các đối tượng có hình dạng đa dạng, chất liệu và cả ánh sáng, bóng đổ!

Các dự án có thể sử dụng ngay trong thực tế, và cả những mẹo tối ưu hóa nữa!

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

예상 질문 Q&A 💬

Q. Tôi là người mới bắt đầu hoàn toàn, không chuyên ngành. Tôi muốn nghe khóa học này, liệu người không chuyên như tôi có thể hiểu được khi nghe khóa học không?
A. Xin chào! Theo tôi nghĩ, nếu người không chuyên đã biết những kiến thức cơ bản về javascript thì việc theo dõi khóa học sẽ không có vấn đề gì cả. Nếu bạn chưa biết javascript thì có thể sẽ hơi khó khăn ở phần cuối. Tuy nhiên điều này cũng tùy thuộc vào từng người, tôi đã thấy có những bạn tự tìm hiểu những phần không biết thông qua các khóa học miễn phí khác hoặc tìm kiếm trên Google. Nếu có phần nào không hiểu, đừng ngần ngại mà hãy thoải mái đặt câu hỏi nhé!

Q. Có cần chuẩn bị gì trước khi tham gia khóa học không?
A. Điều bạn cần chuẩn bị trước là một chiếc máy tính (Mac hoặc Windows) để có thể thực hành theo trong khi nghe giảng. Tất cả các công cụ cần thiết khác đều có thể tải xuống miễn phí từ internet như Chrome, vscode, npm, blender, v.v. Và chúng tôi đang chuẩn bị để bạn có thể tải xuống tất cả tài liệu cần thiết, tài nguyên và mã code được sử dụng trong bài giảng.

Q. Tại sao phải học React Three Fiber(R3F)?
A. Hiện tại có thể nói React đang là xu hướng chủ đạo trong phát triển web. Tuy nhiên, tôi nghĩ chỉ với React thôi thì không thể tạo ra sự khác biệt so với người khác. Vì vậy, nếu trang bị thêm vũ khí là web 3D - thứ đang phát triển mạnh mẽ hiện tại và sẽ tiếp tục phát triển trong tương lai, tôi tin rằng bạn có thể tạo ra lộ trình riêng biệt và khác biệt so với người khác! Ngoài ra, do các ngành công nghiệp như metaverse, XR(VR, AR), game web(HTML5), blockchain, nhu cầu về nội dung web 2D/3D có tương tác hấp dẫn đang tăng vọt. Vì vậy, nhu cầu về các trang web 2D/3D có tương tác hấp dẫn thay vì chỉ là những trang web đơn giản sẽ tiếp tục duy trì. Theo đó, nhu cầu về các nhà phát triển web 3D cũng đang ngày càng tăng. Hãy cùng tạo ra những trang web nổi bật, khác biệt so với người khác nhé!

Lưu ý trước khi học 📢

Môi trường thực hành

• Trong khóa học sử dụng macOS - chip Apple nhưng cũng có thể sử dụng chip Intel Mac hoặc môi trường Windows.
• Chương trình sử dụng : Chrome, vscode, blender, v.v.
• Cấu hình PC: Khuyến nghị CPU 2.0GHz trở lên, RAM 8GB trở lên, card đồ họa hỗ trợ WebGL

Tài liệu học tập

• Cung cấp file nén mã nguồn cho từng phần ( zip )
  
  • 0, 2, 3, 4, 5, 6, 7강 + dự án thực tế
  • Cung cấp file mô hình 3D giày dép

Kiến thức tiên quyết và lưu ý

• Nếu bạn đã biết những kiến thức cơ bản về JavaScript thì có thể làm được.
• Tốt nhất là bạn có kiến thức cơ bản về React, nhưng không có cũng không sao.
• Những câu hỏi bạn đặt sẽ được trả lời nhanh nhất trong ngày, muộn nhất là trong vòng 3 ngày.
• Nội dung về dự án thương mại điện tử 3D web đang được cập nhật liên tục.

Giới thiệu người chia sẻ kiến thức ✒️

Xin chào. Tôi là Han Tae Jae, kỹ sư đồ họa web với 10 năm kinh nghiệm. Về cơ bản tôi là một full-stack developer nhưng tập trung vào công việc frontend :)

Tôi đã phát triển frontend sử dụng các framework như Angular, React. Tuy nhiên, công việc tôi yêu thích nhất vẫn là các dự án xử lý đồ họa 2D/3D Canvas trên web (HTML5) với Threejs, WebGL, D3js, Pixi.js. Tôi đầy đam mê với việc tạo ra những nội dung web tương tác mang đến trải nghiệm người dùng (UX) mới mẻ và sáng tạo. Hãy cùng tạo ra những dự án thú vị nhé!

Lý lịch/Portfolio/Video cá nhân

• Nhà phát triển frontend 3D tương tác với 10 năm kinh nghiệm
• (Hiện tại) Neowiz - Nhà phát triển game HTML5
• (Hiện tại) Viện nghiên cứu của mọi người - Trưởng phòng thí nghiệm Generative art
• Wemade - Trưởng nhóm phát triển Defi Frontend
• Davío - Trưởng nhóm phát triển Three.js
• Dmajor - Nhà phát triển Frontend cấp cao
• Phòng thí nghiệm Interactiver art of web - Viện nghiên cứu của mọi người
• Addpac - Nhà phát triển Frontend Junior
• NHN Naver Japan - Nhà thiết kế UX/UI
• Madman Post - CG Effect Artist
• Đại học Kookmin - Chuyên ngành Thiết kế Công nghiệp