Wawa Sensei logo

Apa itu React Three Fiber?

Sebelum kita mulai coding, mari kita lihat mengapa kita menggunakan React Three Fiber dan apa itu sebenarnya.

WebGL

WebGL adalah API JavaScript untuk merender grafik 2D dan 3D interaktif dalam browser web yang kompatibel tanpa menggunakan plug-in.

Ini didasarkan pada OpenGL ES, sebuah API grafik 3D tingkat rendah untuk perangkat embedded. WebGL memungkinkan rendering grafik 2D dan 3D yang dipercepat oleh perangkat keras, yang membuatnya memungkinkan untuk membuat visualisasi kompleks dan game yang berjalan dengan lancar di browser.

Namun, menulis kode WebGL secara langsung sangat sulit dan memakan waktu. Di sinilah Three.js masuk...

Three.js

Three.js adalah JavaScript library yang menyediakan API sederhana untuk membuat dan menganimasikan grafik 3D di browser menggunakan WebGL.

Ini menyingkirkan banyak detail tingkat rendah dari WebGL, sehingga lebih mudah untuk membuat scene dan animasi 3D yang kompleks.

React Three Fiber

React Three Fiber adalah React renderer untuk Three.js yang memungkinkan Anda menggunakan Three.js dengan cara deklaratif, mirip dengan cara Anda menggunakan React untuk membangun antarmuka pengguna.

Anda juga akan melihatnya disebut sebagai R3F.

R3F menyediakan serangkaian React components yang sesuai dengan objek Three.js, seperti meshes, lights, dan cameras, dan memungkinkan Anda menggunakan model komponen React untuk membangun scene dan animasi 3D yang kompleks.

Untuk hasil yang sama, kode React Three Fiber jauh lebih pendek dan lebih mudah dibaca daripada kode Three.js.

Berikut adalah contoh sederhana untuk menampilkan kubus dengan kedua library:

// Three.js
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);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres dikenal sebagai pmndrs adalah kumpulan pengembang yang sangat aktif dan bertanggung jawab atas React Three Fiber serta pustaka lain yang sangat berguna seperti:

  • drei: kumpulan helper yang berguna dan komponen yang sepenuhnya fungsional untuk r3f
  • gltfjsx: alat baris perintah yang menghasilkan komponen siap pakai dari file gltf (format file model 3D)
  • react-spring: pustaka animasi berbasis fisika pegas
  • zustand: solusi manajemen negara yang kecil, cepat, dan dapat diskalakan
  • react-xr: satu set komponen React yang memudahkan pembuatan pengalaman VR dan AR menggunakan R3F ... dan masih banyak lagi!

Kami akan menggunakan beberapa pustaka ini dalam kursus ini.

Saya merekomendasikan Anda untuk memeriksanya, dan lakukan secara berkala, karena mereka terus diperbarui dengan fitur dan peningkatan baru.

Alternatif

Ada pustaka lain yang menyediakan fungsi serupa untuk framework front-end lainnya, seperti Threlte untuk Svelte, TresJS untuk Vue, dan Angular Three untuk Angular.

Baru-baru ini pmndrs juga merilis drei-vanilla yang merupakan versi vanilla dari drei untuk mereka yang ingin menggunakan komponennya tanpa React.

< Introduction
Setup >