Sejauh ini kita telah membuat banyak scene 3D, tetapi kita hanya menampilkan satu pada satu waktu dan mengambil alih seluruh halaman.

Dalam pelajaran ini kita akan belajar bagaimana mengintegrasikan beberapa scene 3D di dalam satu halaman HTML seperti halnya menambahkan gambar, video, atau elemen HTML lainnya ke situs web Anda.

Proyek Pemula

Untuk pelajaran ini, kita akan membuat halaman landing untuk agensi pengembangan web 3D fiksi.

Paket awal ini berisi halaman responsif yang sederhana dan siap digunakan yang berisi bagian-bagian berikut: Home, Services, Team, Portfolio, dan Contact.

Ini adalah halaman HTML standar yang berisi konten yang dapat diindeks untuk mesin pencari dan aksesibilitas yang akan kita tingkatkan dan ilustrasikan dengan konten 3D.

Halaman landing tanpa konten 3D

View

Untuk membuat dan merender beberapa scene 3D dalam halaman kita, kita akan menggunakan Komponen View dari perpustakaan Drei.

Dengan menggunakannya, kita dapat menggunakan hanya satu komponen Canvas dan merender beberapa scene independen (view) di dalamnya. Ini sangat berguna karena memungkinkan kita menggunakan hanya satu konteks WebGL dan menghindari masalah performa.

View-view ini terhubung ke elemen HTML target dan dapat diposisikan serta diukur secara independen sambil bereaksi dengan tepat terhadap sentuhan, mouse, gulir, dan peristiwa pengubahan ukuran.

Canvas

Untuk mempersiapkan halaman kita dengan konten 3D, mari kita buat komponen Canvas seperti biasa di bagian atas elemen main.

HomePage.jsx:

Copy
// ...
import { Canvas } from "react-three-fiber";

export const HomePage = () => {
  // ...

  return (
    <main>
      <Canvas
        className="canvas"
        camera={{ position: [0, 0, 1.5], fov: 30 }}
      ></Canvas>
      {/* ... */}
    </main>
  );
};

Kelas canvas digunakan untuk menata kanvas dan membuatnya memenuhi seluruh halaman. Itu sudah didefinisikan dalam file index.css.

Tracking

Proyek awal berisi komponen scene 3D yang akan kita gunakan untuk menggambarkan bagian-bagian berbeda dari halaman.

Mari tambahkan satu untuk bagian beranda:

Copy
import { Hero3D } from "./Hero3D";

export const HomePage = () => {
  // ...
  return (
    <main>
      <Canvas className="canvas" camera={{ position: [0, 0, 1.5], fov: 30 }}>
        <Hero3D />
      </Canvas>
      {/* ... */}
    </main>
  );
};