Sejauh ini, pengalaman 3D yang kita buat hanya berisi elemen HTML canvas di mana Three.js 3D scenes kita dirender.

Ada dua cara untuk membuat pengalaman kita lebih interaktif:

• Buat halaman HTML Anda seperti biasa dan tambahkan 3D scene Anda sebagai latar belakang dalam fullscreen canvas. Kemudian integrasikan dengan baik melalui koneksi mouse events atau page scroll. Kita akan melihat cara mencapainya di bagian scroll dalam pelajaran animasi.
• Menambahkan elemen HTML seolah-olah mereka adalah objek 3D dalam 3D scenes kita. Inilah yang akan kita lihat dalam pelajaran ini.

Kedua pendekatan tersebut tidak saling eksklusif. Anda dapat mengombinasikan keduanya untuk menciptakan pengalaman yang immersif.

Showroom online Ikea

Untuk pelajaran ini, mari kita bayangkan kita ingin membuat showroom online untuk Ikea. Paket awalnya berisi berbagai model 3D dari mebel dapur (semuanya berasal dari Quaternius di Poly Pizza, terima kasih 🙏).

Inilah yang kita miliki sejauh ini. Dapur bergaya Jepang.

Kita akan mencoba menambahkan label pada mebel dapur untuk menunjukkan nama dan harga dari setiap item.

Sebelum melakukannya, izinkan saya menjelaskan beberapa bagian dari paket awal.

Untuk membuat kode lebih generik, alih-alih mendeklarasikan setiap item secara manual dan menulis ulang logika pemuatan dan pemposisian, saya membuat array dari 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],
  },
];

Kemudian saya membuat komponen generik yang disebut Item yang mengambil model path dan transform props lainnya (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>
  );
};

Komponen ini bertanggung jawab untuk memuat 3D model dan memposisikannya di dalam scene. Saya memilih group sebagai elemen root agar dapat menambahkan elemen HTML sebagai anak nantinya.

Kemudian kita melakukan loop melalui items array dan merender komponen Item untuk setiap item:

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

Elemen HTML dalam 3D

Sekarang kita memiliki komponen generik yang dapat merender setiap model 3D dan memposisikannya dalam scene, kita dapat fokus pada label furnitur kita.

Mari tambahkan lebih banyak informasi ke dalam items array kita dengan menambahkan properti label dan 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,
  },
];

Jangan tersinggung dengan nama dan harga, ini dihasilkan oleh GitHub Copilot...

Sekarang kita dapat memperbarui komponen Item kita untuk mendapatkan props name dan price dan merendernya sebagai elemen HTML: