Chúng ta đã học được rất nhiều cho đến bây giờ, và giờ là lúc để kết hợp mọi thứ lại với nhau. Trong bài học này, chúng ta sẽ tạo ra một portfolio đáp ứng tuyệt đẹp!

Đừng lo lắng, chúng ta cũng sẽ học thêm những điều mới trong suốt quá trình 😊

Chúng ta sẽ xây dựng gì

Phiên bản máy tính:

Phiên bản di động:

Đừng giới hạn bản thân trong việc xây dựng chính xác như vậy. Hãy thoải mái thêm dấu ấn của riêng bạn vào đó.

Hy vọng bạn đang cảm thấy hào hứng! Hãy bắt đầu thôi! 🚀

Gói khởi đầu

Để tập trung vào những phần thiết yếu, gói khởi đầu cho dự án cuối cùng này chứa tất cả các mô hình 3D, hoạt hình, phông chữ và kết cấu mà chúng ta sẽ sử dụng. (Trừ avatar, chúng ta sẽ nói về điều đó sau)

Các React component cho mỗi mô hình đã được tạo ra với gltfjsx.

Tôi chỉ thêm một dòng trong bình luận để ghi công tác giả và theo dõi nguồn gốc của mỗi mô hình:

Copy
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.2.3 public/models/Balloon.glb -o src/components/Balloon.jsx -r public
Balloon by Poly by Google [CC-BY] (https://creativecommons.org/licenses/by/3.0/) via Poly Pizza (https://poly.pizza/m/d1gDDhM7pTf)
*/

Hiện tại, đây là những gì mà gói khởi đầu trông như khi chúng ta chạy ứng dụng:

Một khối vuông trắng và một nền màu xám rất nhạt.

Chúng ta đừng lãng phí thời gian và bắt đầu xây dựng portfolio của mình!

Hình đại diện 3D

Chúng ta sẽ sử dụng Ready Player Me để tạo hình đại diện của mình. Đây là một dịch vụ miễn phí cho phép các nhà phát triển thêm hình đại diện vào ứng dụng của họ.

Đi tới Ready Player Me, tạo một tài khoản hoặc đăng nhập nếu bạn đã có, và tạo hình đại diện cho riêng mình.

Bạn có thể sử dụng ảnh làm tham chiếu hoặc tạo một hình đại diện mới từ đầu.

Bộ soạn thảo cung cấp một loạt các tùy chọn để làm cho hình đại diện trông giống bạn.

Khi bạn hài lòng với hình đại diện của mình, nhấp vào nút Enter Hub ở góc trên bên phải.

Trong Hub, nhấp vào download icon ở bên trái nút Customize look.

Và nhấp vào Download Avatar as .glb file.

Bạn sẽ có một tệp có tên bắt đầu bằng id của hình đại diện và kết thúc với .glb.

Ví dụ, của tôi là 646d9dcdc8a5f5bddbfac913.glb

Sao chép tệp này vào thư mục public/models của dự án của bạn.

Sau đó chạy lệnh sau trong terminal của bạn:

Copy
npx gltfjsx public/models/646d9dcdc8a5f5bddbfac913.glb -o src/components/Avatar.jsx -k -r public

Thay thế 646d9dcdc8a5f5bddbfac913.glb bằng tên tệp hình đại diện của bạn.

Một lời nhắc nhanh về các tham số chúng ta đã sử dụng:

• -o để chỉ định tệp đầu ra
• -k để giữ lại tên của các nodes
• -r để chỉ định đường dẫn gốc cho mô hình

Trong tệp src/components/Avatar.jsx, hãy đổi tên component thành Avatar:

Copy
// ...

export function Avatar(props) {
  // ...
}

Giờ chúng ta có thể thay thế component Cube trong src/Experience.jsx bằng component Avatar của mình:

Copy
import { Environment } from "@react-three/drei";
import { Avatar } from "./Avatar";

export const Experience = () => {
  return (
    <>
      <Environment preset="sunset" />
      <Avatar />
    </>
  );
};

Bây giờ bạn sẽ thấy hình đại diện đẹp trai của mình ở giữa khung cảnh!

Một số học viên báo cáo sự cố với tệp được tạo bởi gltfjsx local CLI. Nếu bạn gặp bất kỳ vấn đề nào khi cố gắng hiển thị Avatar, bạn có thể sử dụng phiên bản trực tuyến để tạo component Avatar.jsx.

Hãy chắc chắn đổi tên component và xác định đường dẫn của mô hình là chính xác. Bạn nên thêm /models/ trước tên mô hình trong hook useGLTF và hàm preload ở cuối tệp.

Với hình đại diện của tôi, nó sẽ là:

Copy
// ...
export function Avatar(props) {
const { nodes, materials } = useGLTF("/models/646d9dcdc8a5f5bddbfac913.glb");
// ...

và ở cuối tệp:

Copy
// ...
useGLTF.preload("/models/646d9dcdc8a5f5bddbfac913.glb");

Hoạt hình Mixamo

Chúng ta sẽ sử dụng Mixamo để thêm hoạt hình vào avatar của mình. Nhờ Ready Player Me, chúng ta đã có một avatar đã được rig, vì vậy quá trình sẽ rất đơn giản.

Truy cập Mixamo, tạo một tài khoản hoặc đăng nhập nếu bạn đã có, và đi đến phần animations.

Bạn sẽ thấy animations ở bên trái và một khu vực xem trước ở bên phải.

Nhấp vào nút Upload Character, một hộp thoại sẽ mở ra nhưng nó chỉ chấp nhận các tệp .fbx, .obj, và .zip. Chúng ta cần chuyển đổi tệp .glb của mình sang .fbx.

Tôi đã cung cấp một phiên bản .fbx của avatar của tôi trong thư mục public/models của bộ khởi động có tên là avatar.fbx. Nếu bạn muốn sử dụng nó, bạn có thể bỏ qua bước tiếp theo.