Sampai sekarang, kita hanya menggunakan bentuk primitif untuk membuat adegan 3D kita (kubus, bola, bidang, dll...).

Tetapi yang membuat grafik 3D begitu menarik adalah kemampuan untuk mengimpor dan menampilkan model 3D yang dibuat dengan perangkat lunak pemodelan 3D seperti Blender, Maya, Cinema 4D, Nomad Sculpt, dan lainnya.

Pengenalan

Kita tidak akan melakukannya pemodelan 3D dalam kursus ini karena itu adalah topik yang sangat luas. Kemampuan ini bukanlah keterampilan wajib untuk membuat pengalaman 3D dengan threejs dan React Three Fiber. Anda dapat menemukan banyak model 3D gratis online dan menggunakannya dalam proyek-proyek Anda. Namun, mempelajari dasar-dasar pemodelan 3D dapat sangat membantu untuk memahami dengan lebih baik bagaimana model 3D dibuat dan cara menggunakannya dalam proyek Anda.

Jika Anda mengikuti jalur ini, saya sarankan Anda menggunakan Blender, yang merupakan perangkat lunak pemodelan 3D yang gratis dan sumber terbuka. Ini adalah alat yang sangat kuat dan ada banyak tutorial tersedia online untuk mempelajari cara menggunakannya.

Yang paling terkenal untuk memulai adalah Donut Tutorial dari Blender Guru.

Model 3D

Model 3D adalah file-file yang mengandung data tentang geometri dari model 3D. Mereka juga bisa mengandung tekstur dan animasi.

Ada banyak format file yang berbeda untuk model 3D. Format yang paling umum adalah:

• .obj: Format file sederhana yang hanya mengandung geometri dari model 3D.
• .fbx: Sebuah format file biner yang mengandung geometri, tekstur, dan animasi dari model 3D. Ini merupakan format yang digunakan oleh Unity dan Unreal Engine.
• .gltf: Sebuah format file JSON yang mengandung geometri, tekstur, dan animasi dari model 3D. Ini adalah format yang direkomendasikan untuk web karena formatnya yang sangat kompak.
• .glb: Versi biner dari format .gltf. Ini adalah format yang lebih kompak, biasanya 33% lebih kecil dari format .gltf.

Dalam kursus ini, kita akan menggunakan format .gltf dan .glb.

Mudah untuk mengonversi model 3D dari satu format ke format lain menggunakan Blender.

Mencari Model 3D

Berikut adalah beberapa situs web di mana Anda dapat menemukan model 3D gratis:

• Poly Pizza: Koleksi model 3D low-poly bebas royalti.
• Pmndrs Market: Koleksi lain aset 3D bebas royalti (Ya, dari pencipta React Three Fiber!)
• Sketchfab: Platform untuk berbagi dan mengunduh model 3D. Banyak model gratis tersedia!
• Unity Asset Store: Awalnya untuk Unity, tetapi Anda dapat menemukan banyak paket model 3D yang dapat Anda gunakan dalam proyek Anda.
• Quaternius: Seorang seniman 3D yang berbagi paket model 3D gratis di situs webnya.
• Kenney: Pencipta hebat lainnya yang berbagi banyak paket model 3D gratis berkualitas tinggi.

Dalam semua kasus, pastikan untuk memeriksa lisensi model 3D yang ingin Anda gunakan. Beberapa di antaranya gratis untuk penggunaan pribadi saja, beberapa gratis untuk penggunaan komersial, dan beberapa tidak gratis sama sekali. Beberapa juga memiliki lisensi khusus untuk mencegah model 3D digunakan dalam konteks tertentu seperti NFT.

Sekarang kita memiliki model 3D kita, mari kita lihat bagaimana memuatnya ke dalam proyek kita.

Struktur Proyek

Folder public adalah folder root proyek kita. Di sinilah kita menempatkan semua aset statis proyek kita (gambar, model 3D, file audio, dll...).

Untuk menjaga agar proyek kita tetap teratur, kita akan membuat folder models di dalam folder public untuk menyimpan semua model 3D kita.

Paket pemula sudah berisi folder models dengan beberapa model 3D di dalamnya. Mereka berasal dari Quaternius.

useLoader

Komponen dasar untuk memuat sumber daya eksternal apa pun dalam React Three Fiber adalah hook useLoader. Ini adalah hook yang mengambil loader sebagai argumen pertama dan url sebagai argumen kedua. Ini mengembalikan sumber daya yang dimuat.

loader adalah kelas yang memperluas kelas Loader dari threejs. Ada banyak loader tersedia di threejs untuk memuat berbagai jenis sumber daya. Misalnya, GLTFLoader digunakan untuk memuat file .gltf dan .glb.

Mari memuat model 3D pertama kita:

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} />
    </>
  );
};

Komponen primitive digunakan untuk menampilkan objek threejs dalam scene kita. Ia mengambil prop object yang merupakan objek threejs yang ingin kita tampilkan.

Model 3D kita sekarang sudah dimuat dan ditampilkan dalam scene kita. (Tampak bagus, kan?)

useLoader mengurus caching sumber daya yang dimuat. Jadi jika kita memuat sumber daya yang sama beberapa kali, itu hanya akan dimuat sekali.

useGLTF / useFBX

Drei library menyediakan dua hook untuk memuat model 3D: useGLTF dan useFBX. Mereka adalah pembungkus di sekitar hook useLoader yang lebih mudah digunakan.

Mari kita perbarui kode yang ada untuk menggunakan hook useGLTF: