Phát triển web 3D tương tác học bằng 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) và Blockchain, v.v.

Nhu cầu về nội dung web 2D/3D với các tương tác rực rỡ đang tăng vọt.

Ngoài ra, nhu cầu về kỹ sư đồ họa web + phát triển Front-end cũng đang tăng vọt trên thị trường việc làm.

Nhu cầu về các trang web 2D/3D có tương tác rực rỡ, thay vì chỉ là những trang web đơn thuần, sẽ còn tiếp tục kéo dài.

Tuy nhiên, trong khi có rất nhiều bài giảng về 3D dành cho nhà phát triển game và nhà phát triển Unity, thì các bài giảng về Web 3D lại quá thiếu thốn.

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

Hãy cùng tạo ra những trang web 3D một cách dễ dàng và thú vị hơn bằng cách học stack R3F mà bạn không thể tìm thấy ở bất cứ đâu khác!

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

Khóa học này dành cho ai?

• Nhà phát triển/Nhà thiết kế muốn tạo ra những trang web đặc biệt và 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 sở hữu vũ khí khác biệt so với những người khác
• Nhà phát triển/nhà thiết kế muốn bắt đầu những thử nghiệm thú vị trên web

Bạn có cảm thấy thú vị với việc tạo ra các trang web không?

• Bạn không cảm thấy nhàm chán với việc tạo bảng tin trang web và phát triển cửa sổ pop-up sao?
• 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ó đang yêu cầu tạo ra một trang web lộng lẫy, bắt mắt và khác biệt so với những trang web khác không?
• Trang web này được làm như thế nào vậy? Bạn có muốn tạo ra một trang web khiến mọi người phải thốt lên "WOW" không?

Thông qua khóa học này, bạn sẽ

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

Đặc điểm của bài giảng ✨

Học React và Three.js cùng một lúc! React Three Fiber (R3F)
Từ kiến thức 3D cơ bản đến các dự án thực tế và cả những mẹo tối ưu hóa!

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

Nội dung học tập 📚

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

So sánh với trường quay thực tế và bối cảnh làm phim hoạt hình giúp bạn thấu hiểu kiến thức một cách nhanh chóng!

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

< Geometry, Material >

Nhiều hình dạng vật thể và chất liệu khác nhau, cho đến cả ánh sáng và bóng đổ!

<Dự án thương mại điện tử web 3D>

Dự án có thể áp dụng ngay vào thực tế, cùng với các mẹo tối ưu hóa!

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

Câu hỏi thường gặp Q&A 💬

Q. Tôi là người mới bắt đầu và không thuộc chuyên ngành này. Tôi muốn tham gia khóa học nhưng liệu một người không chuyên như tôi có thể hiểu được nội dung không?
A. Xin chào! Theo tôi, nếu bạn là người không chuyên nhưng đã nắm vững kiến thức cơ bản về JavaScript thì việc theo kịp khóa học sẽ hoàn toàn không có vấn đề gì. Nếu bạn chưa biết về JavaScript, có thể phần sau của khóa học sẽ hơi khó khăn một chút. Tuy nhiên, điều này còn tùy thuộc vào mỗi người, tôi đã thấy có những bạn vừa học vừa tìm hiểu thêm những phần chưa biết qua các bài giảng miễn phí khác hoặc trên Google. Nếu có bất kỳ phần nào không hiểu, đừng ngần ngại mà hãy đặt câu hỏi thật nhiều nhé!

Q. Tôi cần chuẩn bị gì hoặc có điều gì cần thiết khi tham gia khóa học không?
A. Những thứ 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, bao gồm Chrome, VS Code, npm, Blender, v.v. Ngoài ra, tôi cũng đang chuẩn bị sẵn sàng để bạn có thể tải xuống tất cả các tài liệu, tài nguyên cần thiết và mã nguồn được sử dụng trong bài giảng.

Hỏi: Tại sao nên học React Three Fiber (R3F)?
Đáp: Hiện nay, có thể nói React đang là xu hướng chủ đạo trong phát triển web. Tuy nhiên, tôi nghĩ rằng chỉ với React thôi thì chưa đủ để tạo nên sự khác biệt so với những người khác. Vì vậy, nếu bạn trang bị thêm vũ khí Web 3D - lĩnh vực chắc chắn sẽ tiếp tục phát triển mạnh mẽ trong tương lai - bạn có thể xây dựng một lộ trình riêng biệt cho bản thân! Ngoài ra, nhu cầu về nội dung web 2D/3D có tính tương tác cao đang tăng vọt nhờ các ngành công nghiệp như Metaverse, XR (VR, AR), game web (HTML5) và Blockchain. Do đó, nhu cầu về các trang web 2D/3D có tương tác lộng lẫy thay vì các trang web đơn thuầ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 lên. Hãy cùng nhau tạo ra những trang web nổi bật và khác biệt so với phần còn lại nhé!

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

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

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

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

• 각 섹션별 소스코드 압축 파일 제공 ( zip ) 
  
  • Bài giảng 0, 2, 3, 4, 5, 6, 7 + Dự án thực tế
  • Cung cấp file mô hình 3D giày

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

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

Giới thiệu về 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 nhà phát triển full-stack nhưng tôi tập trung làm việc ở mảng front-end :)

Tôi đã từng phát triển frontend bằng các framework như Angular, React. Tuy nhiên, công việc mà 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) như Threejs, WebGL, D3js, Pixi.js. Tôi luôn tràn đầy đam mê với các nội dung web tương tác nhằm tạo ra những trải nghiệm người dùng (UX) mới mẻ và sáng tạo. Hãy cùng nhau tạo nên những dự án thú vị nhé!

Lịch sử làm việc/Portfolio/Video cá nhân

• Nhà phát triển Frontend 3D tương tác với 10 năm kinh nghiệm
• (현) Neowiz - Nhà phát triển game HTML5
• (hiện tại) Modulabs - Trưởng nhóm Generative art
• Wemade - Trưởng nhóm phát triển Defi Frontend
• Dabeeo - Trưởng nhóm phát triển Three.js
• Dmajor - Nhà phát triển Front-end cấp cao
• Modulabs - Trưởng nhóm nghiên cứu Interactive art of web
• Addpac - Nhà phát triển Frontend cấp độ 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