Membuat Avatar di ReactJS (Pemula)

Halo berhubung aku sekarang ada kerjaan untuk menampilkan model 3Dimensi di ReactJS jadi iseng bikin avatar diri sendiri niihhh.

Jadi pertama yang harus dibikin adalah model 3D. Daripada susah susah bikin gambar dari awal atau gimana. Nah solusi paling praktis adalah memakai **Ready Player Me.** Gampang kok bikinnya. Nih coba ikutin step dibawah ini.

Pertama buka link ini **Ready Player Me. **Akan muncul tampilan seperti dibawah ini.

home page dari ready player me

terus langsung aja klik tombol “Create Avatar”. Lalu step selanjutnya pilih tipe badan yang kalian mau.

Terus disini bisa langsung ambil foto, jika device kalian ada tools buat ambil gambarnya, kalo engga upload aja foto selfie kalian. Lalu dia akan memproses, ga lama kok, paling 5–10 detik doang.

Abis itu taraaaa… jadilah avatar kalian. Tapi kok kureeeng sih, yaudah disesuaikan aja mau gimana tampilannya, itu dibawah banyak kok buat custom tampilannya. Tenang..

Kalo udah kelar semuanya, tinggal klik aja tombol kanan atas “Enter Hub ->”. Lalu akan masuk ke hub seperti dibawah ini.

Atau terkadang kalian bisa langsung ditampilkan pop up download url seperti ini. Tinggal dicopy kemudian dibuka, langsung otomastis ke download deh.

Untuk download file .glb nya bisa di klik ikon download disebelah tombol Claim Your Avatar itu yaa. Seperti gambar di bawah.

Daann selanjutnya… kita mulai bikin Web nya yuk. Kita pindah ke Reactnya…

Pertamaa.. seperti biasa, kita bikin create-react-app nya. Caranya coba ketik seperti ini di terminal.

npx create-react-app avatar-3d

lalu masuk dan coba mulai dengan ketik

cd avatar-3d
npm start

Jika sudah muncul logo React dengan benar baru edit scriptnya di src/App.js tapi sebelumnya kita install beberapa tools yang digunakan untuk membuat model 3Dimensi ini. Selain three js, kita juga harus menginstall **@react-three/fiber dan @react-three/drei** :

npm install three @react-three/fiber @react-three/drei

Sebelum lanjut ke script web yang utama, kita konversi dlu file glTF (bisa exensi .gltf atau .glb) yang sudah di download dari **Ready Player Me untuk dapat memetakan apa saja yang ada di file tersebut ke dalam format jsx menggunakan [gltfjsx](https://github.com/pmndrs/gltfjsx).**

npx gltfjsx model.glb

Lalu akan menghasilkan file jsx:

[embed]

Model ini akan sedikit ku ubah untuk mendapatkan script yang diinginkan. Ubah export menjadi export default , tambahkan const group = useRef() dan tambahkan referencenya di komponen group <group ref={group} ... >

[embed]

Lalu buka src/App.js hapus dan ubah bagian yang dibutuhkan dan akan mendapatkan hasil seperti ini:

[embed]

Ohiya jangan lupa untuk file gltf nya atau model.glb ditaruh pada folder **avatar-3d/public** yaa

lalu run:

npm start

dan akan muncul bentuk 3D nya

Selengkapnya bisa di lihat disini yaa.

[embed]

Selamat mencobaaa :)

Next akan ditambahkan animasinya biar bisa gerak gerak gituu..