Micro-interactions with R3F
Membangun micro-interaction 3D yang terasa hidup menggunakan React Three Fiber dan physics engine Rapier, tanpa mengorbankan performa.
Detail kecil yang membuat sebuah antarmuka terasa "hidup" sering kali datang dari micro-interaction. Di website ini, kartu lanyard 3D yang bisa diseret dan berayun adalah contohnya.
Kenapa React Three Fiber?
React Three Fiber (R3F) memungkinkan kita menulis scene Three.js secara deklaratif dengan sintaks React. Sebuah mesh menjadi komponen:
<mesh geometry={nodes.card.geometry}>
<meshPhysicalMaterial clearcoat={1} roughness={0.3} metalness={0.5} />
</mesh>
Menambahkan Physics dengan Rapier
Agar kartu berayun realistis, kita butuh physics. Rapier menyediakan rigid body dan joint:
useRopeJoint(fixed, j1, [[0, 0, 0], [0, 0, 0], 1]);
useSphericalJoint(j3, card, [[0, 0, 0], [0, 1.45, 0]]);
Rantai rope joint mensimulasikan tali, sementara spherical joint menghubungkan kartu sehingga bisa berputar bebas.
Jangan Lupa Performa
3D itu berat. Beberapa prinsip yang saya terapkan:
- Lazy-load: bundle 3D hanya dimuat saat komponen terlihat.
prefers-reduced-motion: hormati preferensi pengguna dengan menonaktifkan animasi.- Code-splitting: pisahkan bundle Three.js dari JavaScript utama.
Micro-interaction yang baik terasa mulus, dan bagian dari "mulus" itu adalah tidak membuat halaman lambat.