Tạo portfolio tương tác bằng R3F (React + Three.js / Typescript)

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 nả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?

Bài giảng này là

Thay vì tập trung vào việc tạo ra những thứ có tính chức năng bằng coding, hãy tập trung vào tính biểu đạt và nghiên cứu các phương pháp biểu đạt đa dạng

Trong quá trình đó, chúng tôi đang xử lý Creative Coding nhằm mục tiêu khám phá và biến đổi những kết quả không lường trước được.

Trong số đó, bạn có thể học về vector (Vector) - yếu tố cốt lõi nhất của Interactive Coding và

Bạn có thể sử dụng nó để tạo ra một portfolio khác biệt.

Chủ đề bài giảng 📖

• Công nghệ sử dụng : frontend DOM ( React, gsap ) / webgl ( Three.js )

  
  

Bạn sẽ học trong khóa học nàyframework React được sử dụng nhiều nhất trong frontend và

Thư viện được sử dụng nhiều nhất trong Web Graphic(webgl) là Three.js

Bạn sẽ học R3F(React Three Fiber) có thể xử lý tất cả cùng một lúc.

Bạn sẽ học về khái niệm quan trọng nhất của web tương tác đẹp mắt + Creative Coding là vector (Vector)

Tập trung học tập, và nếu hiểu và sử dụng tốt Vector

Bạn sẽ có thể tạo ra tất cả những chuyển động tương tác mà bạn mong muốn.

Học stack R3F không thể tìm thấy ở bất kỳ đâu khác

Tạo website portfolio tương tác dễ dàng và thú vị hơn.

Chuyên gia về Web 3D tương tác, kinh nghiệm và bí quyết của Web Graphic Engineer / Frontend Developer với 10 năm kinh nghiệm thực tế đều được đưa vào khóa học này.

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

React và Three.js cùng một lúc! React Three Fiber(R3F)!

Từ khái niệm cơ bản về vector - nền tảng của Interactive Coding

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

-Nếu bạn đã biết về Javascript cơ bản 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.

-Từ khái niệm cơ bản của Vector đến ứng dụng, và thậm chí tạo portfolio thông qua khóa học nâng cao!

-Xử lý 3D web nhưng trong khóa học sẽ sử dụng camera 2D(orthographicCamera) để làm việc.

-Để có thể sử dụng ngay trong thực tế, tôi sẽ tiến hành bài giảng bằng Typescript và chia sẻ mã ví dụ.

-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%)

Bạn có thể học về R3F, cho phép xử lý cả React và Three.js(WebGL) cùng một lúc thông qua bài giảng này

nida. Và bạn sẽ hiểu vector là gì - nền tảng của Creative Coding và cách sử dụng nó như thế nào

về và sẽ đề cập đến 4 ví dụ chuyển động sử dụng Vector. Khi nắm vững nền tảng của Vector thì có thể

Bạn có thể tạo ra cho tất cả các chuyển động.

Ngoài ra, bạn có thể học về GSAP - yếu tố thiết yếu của web tương tác và tạo ra những trang web 3D chuyển động đẹp mắt khi cuộn

có thể tạo ra. Không chỉ là màn hình đẹp mắt đơn thuần, mà là của các đối tượng 3D phản ứng và chuyển động theo thời gian thực

Hãy học về animation! Cùng nhau từng bước một lập trình thực hành phù hợp với từng giai đoạn để nắm vững và nâng cao kỹ năng

Đây là khóa học có thể tích lũy được.

Thông qua khóa học này, hãy tạo ra các dự án động và sáng tạo sử dụng rendering thời gian thực, thoát khỏi những trang web tĩnh đơn giản

Hãy xem! Khi bạn làm theo từng bước một, bạn sẽ cảm thấy dự án của mình như thể đang sống động như một trò chơi

Sẽ có đấy !

Tạo website portfolio 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 ở bất kỳ đâu khác!

Nội dung học tập 📚

1. Cơ bản trong cơ bản của Creative Coding! Cơ bản trong cơ bản của website 3D!

Học từng bước về Vector!

Khái niệm cơ bản nhất nhưng quan trọng nhất là Vector sẽ được giải thích một cách dễ hiểu cho tất cả mọi người!

2. Học cách sử dụng vector thông qua việc lập trình trực tiếp và thực hành cùng nhau.

Học tập bằng cách cùng nhau lập trình từng dòng một dựa trên nền tảng lý thuyết!

Học thông qua ví dụ dễ thương về 'gấu con và mật ong' và ví dụ về quả bóng (Ball) nảy trong hộp.

3. Chúng ta đã học về Vector rồi, bây giờ hãy cùng tìm hiểu về Curve (Đường cong) nhé?

Học về Sin / Cos / Tan và các Curve là những khái niệm được sử dụng nhiều trong Creative Coding và

Chúng ta sẽ tiến hành đến thực hành lập trình tương tác sử dụng Curve của R3F(Three.js).

4. Tìm hiểu về thư viện GSAP, yếu tố thiết yếu cho các trang web tương tác và

Điều khiển thế giới 3D tương tác bằng sự kiện cuộn chuột.

Ví dụ tổng hợp để học từ cơ bản đến nâng cao bằng cách sử dụng những kiến thức cơ bản về Vector đã học cho đến nay!

Các quả bóng (Balls) va chạm với nhau, rơi xuống do trọng lực và phản ứng với chuột - một dự án tổng hợp!

Làm thế nào để cấu trúc dự án và debug? Trong thực tế thì lập trình như thế nào?

Từng bước một, từng bước một, cùng học hỏi và cùng hoàn thiện để tạo ra portfolio web tương tác!!

DEMO: https://cclab.taejaehan.com/

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

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

• Trong khóa học sẽ sử dụng macOS - chip Apple nhưng chip mac intel hoặc môi trường window cũng có thể sử dụng được.

• Chương trình sử dụng : Chrome, vscode, npm(node), r3f, 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 )

  • Phần 1, 2, 3 lý thuyết và thiết lập môi trường phát triển

  • Phần 4, 5, 6, 7 dự án thực hành (cung cấp file mã nguồn)

  • Phần 8, 9, 10 Dự án thực tế tổng hợp (cung cấp file mã nguồn)

    
    

  
  

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ể tham gia.

• 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 người có kinh nghiệm cơ bản về 3D và ở mức độ nhập môn với Three.js nên tham gia khóa học này.

  
  

• Trong bài gi강 này, chúng tôi không giải thích về các kiến thức cơ bản 3D như Scene, Camera, Renderer, Mesh, Geometry, Material, Light, v.v. Nếu

  Nếu bạn muốn học về những kiến thức cơ bản của 3D, tôi khuyên bạn nên học khóa học 'Phát triển Web 3D tương tác với React Three fiber(R3F)' của tôi trên Inflearn https://inf.run/XAE71trước, rồi sau đó mới học khóa học này :)

  
  

• Các 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.