Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

React Three Fiber(R3F) - Interactive 3D web development

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

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

Học cách kết hợp React và Three.js! Từ kiến thức 3D cơ bản đến các dự án có thể ứng dụng thực tế trong công việc.

4.5
(31 đánh giá)
238 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 399.000đ -87%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
9.0 giờ video
58 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 28/05/2026

Bạn sẽ học được gì

Các mẹo thực tiễn và phương pháp tối ưu được chia sẻ từ một trưởng nhóm phát triển web toàn thời gian tại một công ty game lớn.
Học Web3D từ con số 0, từng bước một.
Làm chủ React & Three.js cùng lúc với React Three Fiber (R3F).
Xây dựng ứng dụng web R3F thông qua việc học stack R3F mà bạn khó tìm thấy ở nơi khác, một cách dễ dàng và thú vị.
Tạo portfolio của riêng bạn bằng cách làm việc với nhiều ví dụ thực tế, có thể áp dụng và biến tấu cho phù hợp.
Sau khóa học, bạn sẽ có thể xây dựng các trang web với hiệu ứng đặc biệt nổi bật, độc đáo và khác biệt so với mọi người.

Yêu cầu

Bất kỳ ai có kiến thức cơ bản về JavaScript.
Có kiến thức cơ bản về React là một lợi thế, nhưng nếu chưa biết, bạn vẫn có thể học từ đầu!

Đối tượng phù hợp

Bạn là lập trình viên/nhà thiết kế muốn tạo ra các thiết kế web ấn tượng với 3D.
Bạn là lập trình viên/nhà thiết kế muốn hiểu các công cụ đặc biệt giúp trang web trở nên nổi bật và thú vị.
Lập trình viên muốn có một "vũ khí" khác biệt so với người khác.
Lập trình viên/nhà thiết kế muốn bắt đầu thử nghiệm những điều thú vị trên web.

Nội dung khóa học

11 phần • 58 bài giảng
1 Cài đặt Chrome, VSCode và iTerm2
2 Cài đặt nvm (npm / node)
3 Tạo project với Vite
4 Cách import các component ở cấp module
5 Tại sao phải học về js và ts/typescript
6 Cài đặt R3F, Drei
1 Giới thiệu phần / Tải source code
2 Tạo Canvas trong R3F
3 Kiến thức 3D cơ bản - Tìm hiểu về Components
4 Renderer (useFrame)
5 Camera (Perspective, Orthographic)
6 Controls, Helper (axesHelper, gridHelper)
7 Scene (Mesh - Geometry + Material)
8 Điều khiển GUI (leva)
1 Giới thiệu phần / Tải source code
2 Biến đổi - vị trí, kích thước, xoay
3 Khái niệm Object3d - (Scene, Group, Mesh)
4 Di chuyển theo nhóm (Hệ tọa độ World, Local)
1 Giới thiệu phần / Tải source code
2 Khái niệm về geometry và modeling
3 3 cách thêm mesh trong R3F
4 WireFrame, shared geometry, các tùy chọn boxGeometry
5 Các loại geometry cơ bản, tùy chọn của circleGeometry
1 Giới thiệu phần / Tải source code
2 Material (wireframe, basic, lambert)
3 Material (phong, normal)
4 Material (standard, physical, depth)
5 Material (matcap, toon)
1 Light (Ambient, Hemisphere) / Tải source code
2 Light (Directional, Point, Spot)
3 Environment
4 3 loại light và shadow
1 Giới thiệu phần
2 Các loại sự kiện tương tác trong r3f và thay đổi đối tượng
3 Ngăn chặn sự kiện click vào object, giải thích về Raycaster
4 Nhận và xử lý intersect object với raycaster
1 Giới thiệu phần / Tải source code
2 Thiết lập môi trường phát triển & cấu hình dự án
3 Cài đặt alias
1 Chuẩn bị file 3D modeling giày
2 Load và kiểm tra file OBJ, FBX
3 Chỉnh sửa file modeling giày với Blender, lưu và load bằng GLB
4 Click vào giày và đổi màu từng phần
1 Tổ chức file modeling, hình ảnh và code
2 Sử dụng thư viện điều khiển Camera
3 Sự khác biệt giữa Zoom và Dolly, cách sử dụng
4 Di chuyển camera một cách mượt mà
5 Tạo hiệu ứng turntable với Sin & Cos
6 Nhận và xử lý sự kiện từ camera controls (control, sleep...)
7 Hiển thị như bán giày
8 Tăng tính chân thực bằng cách thêm light và shadow (ContactShadows)
1 Thiết kế UI website thương mại điện tử giày bằng AI Midjourney
2 Tạo thanh menu trên cùng bằng React MUI
3 Color List 1 - Thêm file Constants và SCSS
4 Color List 2 - Tạo danh sách chọn màu với React MUI
5 Color List 3 - Thêm màu vào global state Recoil và đổi màu giày
6 Color List 4 - Thêm tên object vào global state Recoil và đổi màu giày
7 Color List 5 - Đổi màu emissive của object / thêm đối tượng được chọn mặc định

Giới thiệu khóa học

Interact 3D web development with React Three Fiber (R3f), and learn from a current web graphic engineer team leader of 10 years.


Learn how to use React and Three.js together! From 3D basics to projects that can be used in the workplace and optimization tips!


Aren’t you tired of creating website bulletin boards and developing pop-up windows?

Would you like to create a website for your company that is flashy, stands out, and stands out from the crowd?

Do you want to create a website that WOWs?


Industries like virtual reality (VR), augmented reality (AR), online gaming, and blockchain are asking for more colorful and interactive web content. And there's a big demand for people like front-end developers and web graphic engineers who can make it happen!

However, while there are lots of resources for game developers and Unity Developers, there aren't enough for creating web 3D.


That's where this course comes in!


You'll learn about R3F (React Three Fiber), a tool that lets you master React and Three.js at the same time.

You’ll learn about how to create a 3D website in an easier and fun way with R3f stack learning that can’t be found anywhere else!

You'll get tips and tricks from a web graphic engineer at a 3D interactive gaming company with 10 years of experience.


And you'll learn step by step, with plenty of practical real-use examples along the way.


*This lecture consists of a video using TTS (speech synthesis).  Please be sure to check the lecture [preview] before taking the course.

*This course consists of a total of 12 lectures and all lectures have currently been translated and uploaded.

*Please let me know if there is anything strange about the translation or subtitles.


Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học D Graphics
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Three Js
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊