Cho đến giờ, chúng ta chỉ mới sử dụng các hình dạng cơ bản để tạo cảnh 3D (hình lập phương, hình cầu, mặt phẳng, v.v...).

Nhưng điều làm cho đồ họa 3D trở nên thú vị là khả năng nhập và hiển thị mô hình 3D được tạo bằng phần mềm mô hình hóa 3D như Blender, Maya, Cinema 4D, Nomad Sculpt, v.v...

Giới Thiệu

Chúng ta sẽ không thực hiện mô hình 3D trong khóa học này vì đây là một chủ đề khá phức tạp. Đó không phải là kỹ năng bắt buộc để tạo ra các trải nghiệm 3D với threejs và React Three Fiber. Bạn có thể tìm thấy nhiều mô hình 3D miễn phí online và sử dụng chúng trong các dự án của mình. Nhưng học những kiến thức cơ bản về mô hình hóa 3D có thể giúp bạn hiểu rõ hơn về cách tạo ra mô hình 3D và cách sử dụng chúng trong dự án của bạn.

Nếu bạn quyết định đi theo con đường này, tôi khuyên bạn nên sử dụng Blender, một phần mềm mô hình 3D mã nguồn mở miễn phí. Đây là một công cụ rất mạnh mẽ và có nhiều hướng dẫn trực tuyến để bạn học cách sử dụng.

Một hướng dẫn nổi tiếng để bắt đầu là Donut Tutorial từ Blender Guru.

Mô Hình 3D

Mô hình 3D là tệp tin chứa dữ liệu về hình học của mô hình 3D. Chúng cũng có thể chứa texture và animation.

Có nhiều định dạng tệp khác nhau cho mô hình 3D. Những định dạng phổ biến nhất là:

• .obj: Một định dạng tệp đơn giản chỉ chứa hình học của mô hình 3D.
• .fbx: Một định dạng tệp nhị phân chứa hình học, texture và animation của mô hình 3D. Đây là định dạng được dùng bởi Unity và Unreal Engine.
• .gltf: Một định dạng tệp JSON chứa hình học, texture và animation của mô hình 3D. Đây là định dạng khuyến nghị cho web vì nó là định dạng rất gọn nhẹ.
• .glb: Phiên bản nhị phân của định dạng .gltf. Đây là định dạng nhỏ gọn hơn, thường nhỏ hơn 33% so với định dạng .gltf.

Trong khóa học này, chúng ta sẽ sử dụng định dạng .gltf và .glb.

Rất dễ để chuyển đổi mô hình 3D từ định dạng này sang định dạng khác sử dụng Blender.

Tìm kiếm mô hình 3D

Dưới đây là một số trang web nơi bạn có thể tìm thấy mô hình 3D miễn phí:

• Poly Pizza: Bộ sưu tập các mô hình 3D low-poly không bản quyền
• Pmndrs Market: Một bộ sưu tập khác của các tài nguyên 3D không bản quyền (Đúng, từ những người sáng tạo của React Three Fiber!)
• Sketchfab: Nền tảng để chia sẻ và tải về các mô hình 3D. Nhiều mô hình miễn phí có sẵn!
• Unity Asset Store: Ban đầu dành cho Unity, nhưng bạn có thể tìm thấy nhiều gói mô hình 3D có thể sử dụng trong các dự án của bạn.
• Quaternius: Một nghệ sĩ 3D chia sẻ các gói mô hình 3D miễn phí trên trang web của mình.
• Kenney: Một người sáng tạo tuyệt vời khác chia sẻ nhiều gói mô hình 3D chất lượng cao miễn phí.

Trong tất cả các trường hợp, hãy đảm bảo kiểm tra giấy phép của các mô hình 3D bạn muốn sử dụng. Một số chỉ miễn phí cho sử dụng cá nhân, một số miễn phí cho sử dụng thương mại, và một số không miễn phí chút nào. Một số cũng có giấy phép tùy chỉnh để ngăn chặn mô hình 3D được sử dụng trong ngữ cảnh cụ thể như NFTs.

Bây giờ chúng ta đã có các mô hình 3D của mình, hãy xem cách tải chúng vào các dự án của chúng ta.

Cấu trúc dự án

Thư mục public là thư mục gốc của dự án. Đây là nơi chúng ta đặt tất cả các tài nguyên tĩnh của dự án (hình ảnh, mô hình 3D, tập tin âm thanh, v.v...).

Để giữ cho dự án của chúng ta có tổ chức, chúng ta sẽ tạo một thư mục models trong thư mục public để lưu trữ tất cả các mô hình 3D của chúng ta.

Gói bắt đầu đã chứa một thư mục models với một số mô hình 3D trong đó. Chúng từ Quaternius.

useLoader

Thành phần cơ bản để tải bất kỳ tài nguyên bên ngoài nào trong React Three Fiber là hook useLoader. Đây là một hook nhận một loader làm tham số đầu tiên và một url làm tham số thứ hai. Nó trả về tài nguyên đã tải.

loader là một lớp mở rộng lớp Loader từ threejs. Có nhiều loader sẵn có trong threejs để tải các loại tài nguyên khác nhau. Ví dụ, GLTFLoader được sử dụng để tải các tập tin .gltf và .glb.

Hãy tải mô hình 3D đầu tiên của chúng ta:

Copy
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

Thành phần primitive được sử dụng để hiển thị một đối tượng threejs trong cảnh của chúng ta. Nó nhận một object prop là đối tượng threejs mà chúng ta muốn hiển thị.

Mô hình 3D của chúng ta hiện đã được tải và hiển thị trong cảnh. (Trông đẹp phải không?)

useLoader chăm sóc việc lưu trữ tài nguyên đã tải. Vì vậy, nếu chúng ta tải cùng một tài nguyên nhiều lần, nó sẽ chỉ được tải một lần.

useGLTF / useFBX

Thư viện Drei cung cấp hai hooks để tải mô hình 3D: useGLTF và useFBX. Đây là các trình bao bọc xung quanh hook useLoader mà dễ sử dụng hơn.

Hãy cập nhật mã hiện có để sử dụng hook useGLTF: