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

Three.js, React Three Fiber, Drei, React Spring & More

Three.js, React Three Fiber, Drei, React Spring & Hơn thế nữa

Three.js, React Three Fiber, Drei, React Spring & Hơn thế nữa

Học mọi thứ bạn cần để xây dựng các Website sáng tạo và sống động bằng Three JS và React

4.6
(431 đánh giá)
3,335 học viên
Giảng viên
Ahmad Al-shurafa
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
12.5 giờ video
51 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

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

Cách cài đặt thư viện ThreeJs và import vào dự án của bạn
Học kiến thức cơ bản về ThreeJs với nhiều minh họa và code mẫu
Tìm hiểu về Scene, Camera và Renderer trong ThreeJs
Tạo cảnh đầu tiên của chúng ta trong ThreeJs
Cách di chuyển và tạo hoạt ảnh cho các đối tượng
Tìm hiểu về Webpack, NodeJs và cách phục vụ các module ES6 tới trình duyệt
Tìm hiểu về các Hình học như Hộp, Hình cầu, Mặt phẳng, Hình xuyến, TorusKnot và hơn thế nữa
Tìm hiểu về các vật liệu như Basic, Normal, Lambert, Phong, Standard, Matcap và các loại khác
Chúng ta cũng sẽ học cách tạo một cảnh tuyệt đẹp bằng Hạt (Particles)
Học kiến thức cơ bản về React và các hooks như useState, useEffect, useRef, v.v.
Tìm hiểu JSX là gì
Cũng sẽ học về các Quy tắc React, Styles, v.v.
Sẽ chuyển toàn bộ những gì đã làm với native threejs sang môi trường React bằng React Three Fiber
Rất nhiều component của Drei sẽ được đề cập
Học cách tạo hoạt ảnh khi cuộn trang
Cách thêm âm thanh vào dự án
Vật liệu Shader
Chúng ta sẽ học một thư viện animation tên là React Spring
Xử lý hậu kỳ trong React (React Post Processing)
Và còn rất nhiều nữa...

Yêu cầu

Một thiết bị có thể cài đặt VSCode hoặc bất kỳ trình soạn thảo code nào
Kiến thức JavaScript cơ bản, bạn nên quen thuộc với let, const, vòng lặp, mảng, hàm
Và hai điều quan trọng nhất là sự kiên nhẫn (hãy kiên nhẫn nhé) và mong muốn xây dựng các Ứng dụng Web 3D

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

Lập trình viên Web mới bắt đầu muốn tìm hiểu về ThreeJs và React Three Fiber
Lập trình viên Front end muốn học các khái niệm về ThreeJs và React Three Fiber
Lập trình viên Web muốn tạo các website 3D sáng tạo và sống động

Nội dung khóa học

7 phần • 51 bài giảng
1 0 - WebGL & ThreeJs là gì
2 1 - Hello Cube
3 2 - Biến đổi (Transformation)
4 3 - Hoạt ảnh (Animation)
5 4 - Webpack
6 5 - Các Hình học (Geometries)
7 6 - Kết cấu (Textures)
8 7 - Vật liệu (Materials)
9 8 - Hạt (Particles)
1 1 - Giới thiệu về React
2 2 - Ứng dụng React đầu tiên
3 3 - Các Quy tắc React
4 4 - Styles trong React
5 5 - Các Thành phần (Components)
6 6 - Xây dựng Bộ đếm sử dụng hook UseState
7 7 - UseEffect
8 8 - Render các phần tử có điều kiện
9 9 - Props
10 10 - React.memo
11 11 - UseRef
1 1 - Giới thiệu về React Three Fiber
2 2 - Xây dựng Ứng dụng React Fiber đầu tiên của chúng ta
3 3 - Xây dựng Ứng dụng React Fiber đầu tiên của chúng ta
4 4 - useLoader
5 5 - Hạt (Particles)
6 6 - Tải Mô hình 3D _ Phát Animations
7 7 - Gỡ lỗi (Debug)
8 8 - Sự kiện (Events)
1 1 - Giới thiệu về Drei
2 2 - Môi trường & Bố cục cảnh (Environment & Staging)
3 3 - Máy ảnh (Camera)
4 4 - Điều khiển (Controls)
5 5 - Văn bản, Văn bản 3D và Html
6 6 - Âm thanh định vị (Positional Audio)
7 7 - Các Shader
8 8 - MeshPortalMaterial
1 1 - Giới thiệu về React Spring
2 2 - Bắt đầu
3 3 - API Mệnh lệnh (Imperative API)
4 4 - Props
5 5 - SpringRef
6 6 - useSprings
7 7 - useTrail
1 1 - Hello Vật lý (Hello Physics)
2 2 - Các vật thể va chạm (Colliders)
3 3 - Các phương thức của vật thể cứng (Rigid Body Methods)
4 4 - Khối lượng (Mass)
5 5 - Các loại (Types)
6 6 - Lưới thể hiện (Instanced Mesh)
7 7 - Cảm biến (Sensor)
1 Xử lý hậu kỳ (Post-Processing)

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

Welcome to my course on React Three Fiber, where you will learn how to build immersive and creative 3D websites using Three.js and React

In this course, you will learn all about Three.js and some of React basics so that you are able to create 3D websites under a library called React Three Fiber

This course is in 6 main sections,

1. Three.js Refresher: Some lessons from my three.js course will be reviewed, so you can understand what will be explained later

2. React: Some React basics will be explained cause this course is mainly about writing React code

3. React Three Fiber: This is where the actual course begins, where you will learn how to write and combine Three.js with React

4. React Three Drei: React is about building reusable components, We will cover a lot of the components that Drei have

5. React Spring: We will learn a physics-based animation library to make your site looks better

6. React Post-Processing: Post-processing are filters that will add beauty to the scene


All code is provided in the resources folder where you can find the Startup folder which is the code at the beginning of the lecture, and the Last Code folder which is the written code after we finished the lesson.


If you encounter any questions regarding a particular lesson, I hope that you will ask the question in the questions section I will answer all questions, so don't be afraid to ask any question


Thanks for participating in my course, and I will see you there.


Ahmad

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 Javascript
Hiển thị tất cả khoá học React
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 😊