Apa itu Three.JS?

Three.JS adalah pustaka JavaScript lintas-browser dan API yang digunakan untuk membuat dan menampilkan grafik 3D animasi di browser Web.

Three.JS memungkinkan pembuatan animasi 3D yang dipercepat GPU menggunakan bahasa JavaScript tanpa bergantung pada plugin

Apa itu React Three Fiber?

react-three-fiber adalah perender React untuk Three.JS yang tidak memiliki overhead tambahan. Komponen berpartisipasi dalam loop render terpadu di luar React. Ini mengungguli Three.JS dalam skala besar karena kemampuan penjadwalan React.

Mempersiapkan

Ada banyak ketergantungan untuk ini:

yarn add three @react-three/fiber @react-three/drei @react-three/postprocressing

Objeknya Canvasadalah tempat Anda mulai menentukan React Three Fiber Scene Anda.

Pada kode di atas, saya baru saja membuat kanvas dengan kamera dan bayangan yang telah dikonfigurasi

Cahaya dan Bayangan

Di dalam kanvas, kita membutuhkan lampu dan bayangan, sehingga model kita akan memiliki bayangannya, dan terlihat cerah

Ciptakan Hati

Pertama, kita harus membuat bentuk hati:

Kemudian kalikan dengan faktor dan kecepatan yang berbeda:

Karena kita ingin hati kita melayang, kita akan mengatur posisinyauseFrame

Terakhir, kita akan melemparkan hati dengan Instancesdan meletakkannya di Canvasatas

Terakhir, kita perlu beberapa efek

Kesimpulan

Hasil

Demo langsung:https://threejs-floating-hearts.vercel.app/

Kode sumber:https://github.com/leduc1901/threejs-floating-hearts

Kata-kata terakhir

Meskipun konten saya gratis untuk semua orang, tetapi jika menurut Anda artikel ini bermanfaat, Anda dapat membelikan saya kopi di sini