Cho đến nay, trải nghiệm 3D mà chúng ta đã xây dựng chỉ chứa một canvas là phần tử HTML nơi mà các cảnh 3D của Three.js được kết xuất.

Có hai cách để làm cho trải nghiệm của chúng ta thêm tương tác:

• Xây dựng trang HTML của bạn như bạn thường làm và thêm cảnh 3D của bạn làm nền trong một canvas toàn màn hình. Sau đó tích hợp tốt bằng cách kết nối chúng thông qua sự kiện chuột hoặc cuộn trang. Chúng ta sẽ xem cách đạt được điều này trong phần cuộn của bài học animation.
• Thêm các phần tử HTML như thể chúng là các đối tượng 3D trong các cảnh 3D của chúng ta. Đây là nội dung của bài học này.

Hai phương pháp này không loại trừ lẫn nhau. Bạn có thể kết hợp chúng để tạo ra các trải nghiệm hấp dẫn.

Phòng trưng bày trực tuyến Ikea

Trong bài học này, hãy tưởng tượng chúng ta muốn tạo một phòng trưng bày trực tuyến cho Ikea. Bộ khởi đầu chứa nhiều mô hình 3D của nội thất nhà bếp (Tất cả đến từ Quaternius trên Poly Pizza, cảm ơn 🙏).

Đây là những gì chúng ta có cho đến nay. Một nhà bếp kiểu Nhật Bản.

Chúng ta sẽ cố gắng thêm nhãn vào nội thất nhà bếp để hiển thị tên và giá của từng món đồ.

Trước khi làm điều đó, hãy để tôi giải thích một số phần của bộ khởi đầu.

Để làm cho mã chung, thay vì khai báo từng món đồ theo cách thủ công và viết lại logic tải và định vị, tôi đã tạo một mảng items.

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
  },
];

Sau đó, tôi tạo một thành phần chung gọi là Item nhận đường dẫn mô hình và các thuộc tính biến đổi khác (position, rotation, scale...):

Copy
const Item = ({ model, position, rotation, ...props }) => {
  const gltf = useGLTF(`models/${model}`);

  return (
    <group position={position} rotation={rotation}>
      <primitive object={gltf.scene} {...props} />
    </group>
  );
};

Thành phần này xử lý việc tải mô hình 3D và định vị nó trong cảnh. Tôi chọn một nhóm làm phần tử gốc để sau này có thể thêm các phần tử HTML làm con.

Sau đó, chúng ta lặp qua mảng items và render một thành phần Item cho mỗi món đồ:

Copy
export const Experience = () => {
  return (
    <>
      {sceneItems.map((item, index) => {
        return <Item key={index} {...item} />;
      })}
    </>
  );
};

Các phần tử HTML trong 3D

Bây giờ chúng ta đã có component chung có thể render bất kỳ mô hình 3D nào và đặt nó vào cảnh, chúng ta có thể tập trung vào nhãn nội thất của mình.

Hãy thêm thông tin vào mảng items bằng cách bổ sung thuộc tính label và price:

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
    name: "Hemnes",
    price: 300,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
    name: "Lillången",
    price: 450,
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
    name: "Skogsta",
    price: 25,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
    name: "Lagan",
    price: 600,
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
    name: "Lerhamn",
    price: 80,
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
    name: "Dango",
    price: 4,
  },
];

Đừng bận tâm với tên và giá, chúng được sinh ra tự động bởi GitHub Copilot...

Giờ đây, chúng ta có thể cập nhật component Item để lấy các props name và price và render chúng thành phần tử HTML: