Wawa Sensei logo

React Three Fiber là gì?

Trước khi bắt đầu mã hóa, hãy xem tại sao chúng ta sử dụng React Three Fiber và nó là gì.

WebGL

WebGL là một API JavaScript dùng để render đồ họa 2D và 3D tương tác trong bất kỳ trình duyệt web nào tương thích mà không cần sử dụng plug-in.

Nó được dựa trên OpenGL ES, một API đồ họa 3D ở mức thấp cho các thiết bị nhúng. WebGL cho phép render tăng tốc phần cứng của đồ họa 2D và 3D, giúp tạo ra các hình ảnh phức tạp và trò chơi chạy mượt mà trong trình duyệt.

Nhưng việc viết mã WebGL trực tiếp thì rất khó và tốn nhiều thời gian. Đó là lúc Three.js phát huy tác dụng...

Three.js

Three.js là một thư viện JavaScript cung cấp API đơn giản để tạo và tạo hoạt hình đồ họa 3D trong trình duyệt sử dụng WebGL.

Nó trừu tượng hóa nhiều chi tiết ở mức thấp của WebGL, giúp dễ dàng tạo ra các cảnh và hoạt hình 3D phức tạp.

React Three Fiber

React Three Fiber là một trình renderer dành cho Three.js trong React, cho phép bạn sử dụng Three.js một cách khai báo, tương tự như cách bạn sử dụng React để xây dựng giao diện người dùng.

Bạn cũng sẽ thấy nó được gọi là R3F.

R3F cung cấp một tập hợp các React components tương ứng với các đối tượng Three.js, như mesh, lights và cameras, và cho phép bạn sử dụng mô hình component của React để xây dựng cảnh và hoạt hình 3D phức tạp.

Đối với cùng một kết quả, mã của React Three Fiber ngắn hơn và dễ đọc hơn mã của Three.js.

Đây là một ví dụ đơn giản để hiển thị một khối lập phương với cả hai thư viện:

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres, được biết đến với tên pmndrs, là một nhóm phát triển cực kỳ năng động, chịu trách nhiệm về React Three Fiber và các thư viện hữu ích khác như:

  • drei: một tập hợp các helpers hữu ích và các thành phần chức năng đầy đủ cho r3f
  • gltfjsx: một công cụ dòng lệnh tạo ra các thành phần sẵn sàng sử dụng từ các tệp gltf (định dạng tệp mô hình 3D)
  • react-spring: một thư viện animation dựa trên vật lý lò xo
  • zustand: một giải pháp quản lý trạng thái nhẹ, nhanh và có thể mở rộng
  • react-xr: một tập hợp các thành phần React giúp dễ dàng tạo ra các trải nghiệm VR và AR bằng cách sử dụng R3F ... và nhiều hơn nữa!

Chúng ta sẽ sử dụng một số thư viện này trong khóa học.

Tôi khuyến khích bạn nên khám phá chúng và thực hiện thường xuyên, vì chúng được cập nhật liên tục với các tính năng và cải tiến mới.

Các lựa chọn thay thế

Có các thư viện khác cung cấp chức năng tương tự cho các framework front-end khác, như Threlte cho Svelte, TresJS cho Vue, và Angular Three cho Angular.

Gần đây, pmndrs đã phát hành drei-vanilla, phiên bản vanilla của drei cho những ai muốn sử dụng các thành phần của nó mà không cần React.

< Introduction
Setup >