Meshes adalah elemen dasar dari adegan 3D. Mereka terdiri dari geometries dan materials. Kita akan mempelajari lebih lanjut tentang ini dalam pelajaran ini, tetapi sebelum itu, mari kita lihat bagaimana cara mendeklarasikan objek di Three.js dengan React Three Fiber.

Mendeklarasikan objek

Dalam Three.js biasa, Anda dapat mendeklarasikan sebuah mesh seperti ini:

Copy
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

Dalam React Three Fiber, untuk mendeklarasikan mesh yang sama, Anda bisa menggunakan kode berikut:

Copy
<mesh>
  <boxGeometry args={[1, 1, 1]} />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Jangan khawatir tentang apa artinya untuk saat ini, kita akan mempelajari lebih lanjut tentang geometries dan materials di bagian berikutnya.

Semua objek Three.js tersedia sebagai komponen React di React Three Fiber. Anda dapat menggunakannya seperti Anda menggunakan komponen React lainnya:

1. Nama komponen harus ditulis dalam bentuk camelCased: boxGeometry alih-alih BoxGeometry.

Konvensi penamaan ini digunakan dalam React Three Fiber untuk membedakan objek Three.js dari komponen React.

Jika Anda melihat <meshBasicMaterial>, itu dimulai dengan huruf kecil, jadi itu adalah objek Three.js. Di sisi lain, jika Anda melihat <Box>, itu dimulai dengan huruf besar, jadi itu adalah komponen React.

Perhatikan bahwa React Three Fiber membuat objek-objek Three.js tersebut tersedia sebagai komponen React tanpa perlu mengimpornya.

2. Argumen konstruktor komponen diteruskan sebagai props: args={[1, 1, 1]} alih-alih const geometry = new THREE.BoxGeometry( 1, 1, 1 ); misalnya.

Untuk mengetahui argumen konstruktor dari sebuah objek Three.js, Anda bisa membaca dokumentasi dari kelas yang bersangkutan.

Berkat Visual Studio Code, Anda juga bisa menggunakan fitur IntelliSense dan mengarahkan kursor pada prop args untuk melihat argumen:

3. Properti komponen diteruskan sebagai props: color={0x00ff00}

Untuk informasi lebih lanjut dan mendalam, baca bagian Objects, properties and constructor arguments dari dokumentasi resmi React Three Fiber.

Geometri

Dalam grafika komputer dan pemodelan 3D, geometri objek mewakili bentuk dan struktur dari objek 3D.

Ini mendefinisikan posisi, ukuran, dan konektivitas dari vertices, edges, dan faces yang membentuk objek tersebut.

Data yang terdapat dalam sebuah geometri biasanya mencakup:

Vertices

Ini adalah titik-titik individu dalam ruang 3D yang menentukan bentuk objek. Setiap vertex memiliki koordinat (x, y, z) yang menentukan posisinya dalam ruang 3D. Vertices terhubung oleh edges untuk membentuk faces.

Edges

Edges adalah garis-garis yang menghubungkan vertices. Mereka mendefinisikan bentuk objek dan dapat berupa lurus atau melengkung. Setiap edge terdiri dari sekumpulan indeks yang merujuk pada vertices.

Faces

Faces adalah poligon yang dibentuk oleh penghubungan vertices. Mereka menentukan permukaan objek dan dapat berupa segitiga, segiempat, atau poligon lainnya. Setiap face terdiri dari sekumpulan indeks yang merujuk pada vertices.

Normals

Normals mendefinisikan orientasi atau arah dari faces. Mereka adalah vektor tegak lurus yang menunjuk keluar dari permukaan setiap face. Normals digunakan untuk perhitungan pencahayaan guna menentukan bagaimana cahaya berinteraksi dengan permukaan objek.

Koordinat UV

Koordinat UV adalah koordinat 2D yang ditetapkan pada setiap vertex dari suatu face geometris. Mereka mendefinisikan bagaimana tekstur atau gambar dipetakan ke permukaan objek. Koordinat UV menentukan bagaimana setiap titik pada tekstur sesuai dengan titik tertentu pada permukaan geometris.

Jenis-jenis geometri

Dengan Three.js ada banyak jenis geometri siap pakai yang dapat Anda gunakan untuk membuat objek 3D, yang paling umum adalah: