Menyelami React Dan Three.js Menggunakan react-three-fiber

Hari ini, kita akan mempelajari cara mengonfigurasi dan menggunakan react-three-fiber untuk membangun dan menampilkan model dan animasi 3D dalam aplikasi React dan React Native.

Tutorial ini untuk pengembang yang ingin mempelajari lebih lanjut tentang animasi model 3D di web menggunakan React dan untuk siapa saja yang memiliki keterbatasan dengan Three.js seperti ketidakmampuan untuk membuat kanvas, mengikat peristiwa pengguna seperti peristiwa click dan memulai loop render, react-three-fiber hadir dengan metode ini. Kami akan membuat model 3D untuk lebih memahami cara membuat model 3D Three.js menggunakan react-three-fiber .

Memulai Dengan react-three-fiber

Three.js adalah library yang memudahkan untuk membuat grafik 3D di browser, menggunakan kanvas + WebGL untuk menampilkan model dan animasi 3D, Anda dapat mempelajari lebih lanjut di sini.

react-three-fiber adalah perender React untuk Three.js di web dan react-native, ini meningkatkan kecepatan Anda membuat model dan animasi 3D dengan Three.js, beberapa contoh situs dengan model dan animasi 3D dapat ditemukan di sini. react-three-fiber mengurangi waktu yang dihabiskan untuk animasi karena komponennya yang dapat digunakan kembali, peristiwa pengikatan, dan loop render, pertama mari kita lihat apa itu Three.js.

react-three-fiber memungkinkan kita untuk membangun komponen kode threeJS menggunakan status React, hook dan props, ia juga dilengkapi dengan elemen-elemen berikut:

Cara Menggunakan react-three-fiber

Untuk menggunakan react-three-fiber , Anda mulai dengan menggunakan perintah di bawah ini:

NPM

 npm i three react-three-fiber

BENANG

 yarn add three react-three-fiber

Catatan : Agar react-three-fiber berfungsi, Anda harus menginstal three (Three.js) seperti yang kami lakukan di atas.

Membangun Model Dadu Ludo 3D Bereaksi Dan Proyek Animasi

Di sini kita akan membuat model dadu ludo 3D menggunakan react-three-fiber seperti yang kita miliki dalam video di bawah ini.

Kami akan menggunakan create-react-app untuk menginisialisasi proyek kami, untuk melakukan itu mari kita jalankan perintah di bawah ini di terminal kita.

 create-react-app react-three-fiber-ludo-model

Perintah di atas menginisialisasi proyek React di dalam mesin lokal kita, selanjutnya mari kita cd ke direktori dan menginstal paket-paket kita react-three-fiber dan three .

 cd react-three-fiber-ludo-model npm i three react-three-fiber

Setelah paket diinstal, mari kita mulai server pengembangan kita menggunakan perintah

 npm start

Perintah di atas harus memulai server pengembangan proyek kami di browser kami. Selanjutnya mari kita buka proyek kita di editor teks pilihan kita, di dalam folder src proyek kita, hapus file-file berikut: App.css , App.test.js , serviceWorker.js dan setupTests.js . Selanjutnya, mari kita hapus semua kode yang mereferensikan file yang dihapus di App.js kita.

Untuk proyek ini, kita akan membutuhkan komponen Box untuk dadu ludo dan komponen App kita yang diberikan oleh React.

Membangun Komponen Box

Komponen Box akan berisi bentuk dadu ludo kita, gambar dadu ludo, dan status untuk selalu memutarnya. Pertama, mari impor semua paket yang kita butuhkan untuk komponen Box kita di bawah ini.

 import React, { useRef, useState, useMemo } from "react"; import { Canvas, useFrame } from "react-three-fiber"; import * as THREE from "three"; import five from "./assets/five.png";

Dalam kode di atas, kita mengimpor useRef , useState dan useMemo . Kami akan menggunakan kait useRef untuk mengakses mata dadu dadu dan kait useState untuk memeriksa status aktif dadu ludo. useMemo hook akan digunakan untuk mengembalikan nomor pada dadu. Selanjutnya, kita mengimpor Canvas dan useFrame dari react-three-fiber , canvas digunakan untuk menggambar grafik di browser, sedangkan useFrame memungkinkan komponen untuk terhubung ke loop render, ini memungkinkan satu komponen untuk dirender isi orang lain. Selanjutnya, kami mengimpor three paket dan kemudian kami mengimpor gambar statis dadu ludo.

Selanjutnya bagi kita adalah menulis logika untuk komponen Box kita. Pertama, kita akan mulai dengan membangun komponen fungsional dan menambahkan status ke komponen kita, mari kita lakukan di bawah ini.

 const Box = (props) => { const mesh = useRef(); const [active, setActive] = useState(false); useFrame(() => { mesh.current.rotation.x = mesh.current.rotation.y += 0.01; }); const texture = useMemo(() => new THREE.TextureLoader().load(five), []); return ( <Box /> ); }

Pada kode di atas, kita membuat komponen Box dengan props, selanjutnya kita membuat ref bernama mesh menggunakan hook useRef , kita melakukan ini agar kita selalu dapat mengembalikan mesh yang sama setiap saat.

Jaring adalah elemen visual dalam sebuah adegan, ini adalah objek 3D yang membentuk poligon segitiga, biasanya dibuat menggunakan Geometri, yang digunakan untuk menentukan bentuk model dan Material yang menentukan tampilan model, Anda dapat pelajari tentang Mesh di sini, Anda juga dapat mempelajari lebih lanjut tentang hook useRef di sini.

Setelah menginisialisasi mesh , kita perlu menginisialisasi status untuk aplikasi kita menggunakan kait useState , di sini kita mengatur status melayang dan aktif aplikasi ke false.

Selanjutnya, kita menggunakan hook useFrame dari react-three-fiber untuk memutar mesh (ludo dice), menggunakan kode di bawah ini

 mesh.current.rotation.x = mesh.current.rotation.y += 0.01;

Di sini, kita memutar posisi mesh saat ini setiap 0,01 detik, ini dilakukan untuk memberikan rotasi animasi yang bagus.

 const texture = useMemo(() => new THREE.TextureLoader().load(five), []);

Pada kode di atas, kita membuat sebuah konstanta bernama texture dan melewatkan sebuah react useMemo hook sebagai fungsi untuk memuat sebuah lemparan dadu baru, disini useMemo untuk mengingat gambar dadu dan nomornya. Anda dapat mempelajari tentang kait useMemo di sini.

Selanjutnya, kami ingin merender komponen Box di browser dan menambahkan acara kami, kami melakukannya di bawah ini

 const Box = (props) => { return ( <mesh {...props} ref={mesh} scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]} onClick={(e) => setActive(!active)} > <boxBufferGeometry args={[1, 1, 1]} /> <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}> <primitive attach="map" object={texture} /> </meshBasicMaterial> </mesh> ); }

Dalam kode di atas, kita mengembalikan komponen Box kita dan membungkusnya dalam mesh , kita melewati semua properti komponen Box menggunakan operator spread, dan kemudian kita mereferensikan mesh menggunakan hook useRef . Selanjutnya, kita menggunakan properti scale dari Three.js untuk mengatur ukuran kotak dadu saat aktif menjadi 2 dan 1,5 saat tidak aktif. Last but not least, kami menambahkan acara onClick untuk menyetel state ke active jika tidak disetel secara default.

 <boxBufferGeometry args={[1, 1, 1]} />

Untuk merender kotak dadu, kami merender komponen boxBufferGeometry dari Three.js, boxBufferGeometry membantu kami menggambar garis dan titik seperti kotak, kami menggunakan argumen args untuk meneruskan konstruktor seperti ukuran geometri kotak.

 <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>

meshBasicMaterial dari Three.js, digunakan untuk menggambar geometri dalam bentuk sederhana. Di sini kita melewati atribut attach dan meneruskan props THREE.DoubleSide ke atribut side . THREE.DoubleSide mendefinisikan sisi atau ruang yang harus dirender oleh react-three-fiber .

 <primitive attach="map" object={texture} />

Komponen primitive dari Three.js digunakan untuk menggambar grafik 3D. Kami melampirkan properti peta untuk mempertahankan bentuk asli dadu ludo. Selanjutnya, kita akan merender komponen Box kita di file App.js dan menyelesaikan kotak dadu ludo 3d kita. Komponen Anda akan terlihat seperti gambar di bawah ini.

Membuat Kotak Dadu Ludo 3D

Di bagian ini, kita akan merender komponen Box di App.js kita dan menyelesaikan kotak ludo 3d kita, untuk melakukannya terlebih dahulu, mari buat komponen App dan bungkus dengan tag Canvas , ini untuk merender model 3D kita, mari kita lakukan di bawah ini.

 const App = () => { return ( <Canvas> </Canvas> ); } export default App;

Selanjutnya, mari kita tambahkan cahaya ke kotak, react-three-fiber memberi kita tiga komponen untuk menerangi model kita, mereka adalah sebagai berikut

• ambientLight
  Ini digunakan untuk menerangi semua objek dalam adegan atau model secara merata, menerima alat peraga seperti intensitas cahaya, ini akan menerangi tubuh dadu ludo.
• spotLight
  Cahaya ini dipancarkan dari satu arah, dan bertambah seiring bertambahnya ukuran objek, ini akan menerangi titik-titik dadu ludo.
• pointLight
  Ini bekerja mirip dengan cahaya bola lampu, cahaya dipancarkan dari satu titik ke segala arah, ini akan diperlukan untuk keadaan aktif aplikasi kita.

Mari kita terapkan hal di atas pada aplikasi kita di bawah ini.

 const App = () => { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> </Canvas> ); } export default App;

Dalam kode di atas, kami mengimpor komponen ambientLight dari react-three-fiber dan menambahkan intensitas 0,5 ke dalamnya, selanjutnya kami menambahkan posisi dan sudut ke komponen spotLight dan pointLight kami. Langkah terakhir untuk aplikasi kita adalah membuat komponen kotak kita dan menambahkan posisi ke kotak dadu ludo, kita akan melakukannya dalam kode di bawah ini

 <Box position={[-1.2, 0, 0]} /> <Box position={[2.5, 0, 0]} />

Setelah selesai, dadu ludo 3D Anda akan terlihat seperti gambar di bawah ini:

Demo yang berfungsi tersedia di CodeSandbox.

Kesimpulan

react-three-fiber telah membuat rendering model 3D dan animasi lebih mudah dibuat untuk aplikasi React dan React Native. Dengan membangun kotak dadu ludo 3D kami, kami telah belajar tentang dasar-dasar Three.js bersama dengan komponen dan manfaat dari react-three-fiber serta cara menggunakannya.

Anda dapat melangkah lebih jauh dengan membuat model dan animasi 3D di aplikasi React dan Native Anda dengan menggunakan react-three-fiber sendiri. Saya ingin melihat hal-hal baru apa yang Anda hasilkan!

Anda dapat membaca lebih lanjut tentang Three.js dan react-three-fiber dalam referensi di bawah ini.

Sumber Daya Terkait

• Dokumentasi Three.js
• Dasar-dasar Three.js
• React-Three-fiber GitHub repo oleh Poimandres
• dokumentasi reaksi-tiga-serat
• React Hooks (useState, useMemo, dll.) dokumentasi resmi