Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Pengenalan rendering 3D telah mengubah interaksi pengguna dengan teknologi internet. Sebagai permulaan, aplikasi web menjadi lebih imersif, memberikan pengalaman yang menarik dan interaktif melalui browser web.

Teknologi ini telah diadopsi dengan penuh semangat oleh bidang game dan augmented/virtual reality. Ini menawarkan cara yang realistis dan imersif untuk berinteraksi dengan elemen virtual.

Cari tahu cara merender objek 3D dalam aplikasi React.

Dasar-dasar Pemodelan dan Pemrograman 3D

Sebelum Anda memulai rendering 3D, ada beberapa hal yang perlu Anda ketahui:

  • Objek 3D berisi titik individual, atau simpul, yang menentukan strukturnya dalam tiga dimensi. Menggabungkan titik-titik ini menciptakan wajah yang membentuk bentuk objek di layar.
  • Browser modern memiliki kemampuan bawaan untuk merender 3D menggunakan teknologi seperti WebGL. Mereka melakukannya dengan memanfaatkan kekuatan unit pemrosesan grafis di mesin Anda untuk merender model dan pemandangan 3D dengan cepat.
  • Objek 3D apa pun yang dirender browser Anda terdiri dari tiga komponen utama. Ini adalah pemandangan, kamera, dan penyaji, dan semuanya memainkan peran penting. Adegan menyediakan platform dasar untuk mengatur semua elemen 3D Anda, termasuk lampu dan kamera. Kamera memungkinkan Anda untuk melihat objek 3D dari berbagai sudut. Terakhir, perender memasang dan menampilkan pemandangan di atas elemen kanvas HTML.

Rendering 3D Dengan Three.js dan React Three Fiber

tiga.js adalah library JavaScript yang dapat Anda gunakan untuk merender objek 3D di browser web. Dengan menggunakan komponen bawaannya, Anda dapat dengan mudah membuat dan merender objek 3D di browser Anda bersama dengan fitur lain dari aplikasi React Anda.

Paket react-three-fiber bekerja di atas Three.js. Ini menyederhanakan proses penggunaan komponen Three.js untuk membuat dan merender objek 3D di browser. Menariknya, ia juga menyediakan custom Bereaksi kait yang berguna saat membuat objek 3D di React.

Merender Objek 3D dalam Aplikasi Bereaksi

Ikuti langkah-langkah di bawah ini untuk merender bentuk 3D sederhana di browser Anda dan juga, model 3D buatan Blender. Jika Anda tidak terbiasa dengan Blender, pelajari cara memulai sebagai pemula.

Buat aplikasi Bereaksi, jalankan terminal Anda untuk menjalankan perintah di bawah, dan instal dependensi yang diperlukan:

npm instal tiga @react-three/fiber @react-three/drei

Instal paket Three.js, react-three-fiber, dan react-three-drei. Pustaka react-three-drei bekerja bersama react-three-fiber untuk membuat adegan dan objek 3D.

Render Bentuk 3D

Anda dapat merender bentuk kotak 3D sederhana di browser dengan sedikit kode. Buka src/aplikasi.js file, hapus semua kode React boilerplate, dan tambahkan berikut ini:

impor Reaksi dari"reaksi";
impor {Kanvas} dari"@react-three/fiber";
impor {OrbitControls} dari"@ reaksi-tiga/drei";
fungsiKotak() {
kembali (
<jala>
<boxBufferGeometrymenempel ="geometri" />
<meshLambertMaterialmenempel="bahan"warna="hotpink" />
jala>
 )
}
eksporbawaanfungsiAplikasi() {
kembali (
<divnama kelas="Aplikasi">
<divnama kelas="Tajuk-aplikasi">
<Kanvas>
<OrbitControls />
<ambientLightintensitas ={0.5} />
<menyorotiposisi={[10,15,10]} sudut={0.3} />
<Kotak />
Kanvas>
div>
div>
 );
}

Kode ini melakukan hal berikut:

  • Itu Kotak komponen menggunakan komponen mesh, boxBufferGeometry, dan meshLambertMaterial dari react-three-fiber untuk merender kotak 3D. Ketiga komponen ini bekerja bahu-membahu untuk menciptakan bentuk kotak.
  • Komponen boxBufferGeometry membuat kotak dan kode ini menyetel properti warna komponen meshLambertMaterial menjadi hot pink.
  • Ini kemudian merender elemen Canvas yang menampung komponen kotak dengan cahaya sekitar, lampu sorot, dan set properti komponen Orbit Controls.
  • Properti komponen cahaya sekitar menambahkan cahaya lembut ke kanvas. Komponen spotLight menambahkan cahaya terfokus dari posisi tertentu dengan sudut 0,3. Terakhir, komponen OrbitControls memungkinkan Anda mengontrol kamera di sekitar objek 3D.

Impor dan render komponen app.js di file index.js dan jalankan server pengembangan untuk melihat hasilnya di browser Anda di http://localhost: 3000.

Render Model 3D Buatan Blender

Blender adalah alat sumber terbuka yang digunakan oleh materi iklan di berbagai bidang untuk membuat model 3D, efek visual, dan aplikasi 3D interaktif. Anda dapat menggunakan Blender untuk membuat model 3D untuk aplikasi web Anda.

Untuk tutorial ini, Anda akan merender model BMW 3D dengan performa SRT yang tersedia di Sketchfab.

Kredit: RadeonGamer/ Sketchfab
Atribusi Creative Commons

Untuk memulai, unduh model dari Sketchfab dalam GLTF (GL Transmission Format). Format ini memudahkan pembuatan model 3D di browser. Setelah unduhan selesai, buka folder model dan pindahkan file model ke direktori publik di dalam aplikasi React Anda.

Sekarang, buka file app.js Anda dan isi dengan kode di bawah ini.

  • Impor komponen berikut: 
    impor {useGLTF, Panggung, PresentationControls} dari"@ reaksi-tiga/drei";
  • Buat komponen model dan tambahkan kode di bawah ini: 
    fungsiModel(Atribut){
    const {adegan} = gunakanGLTF("/bmw.glb");
    kembali<primitifobyek={pemandangan} {...Atribut} />
    }
    eksporbawaanfungsiAplikasi() {
    kembali (
    <divnama kelas="Aplikasi">
    <divnama kelas="Tajuk-aplikasi">
     dpr={[1,2]} 
     kamera bayangan={{fav: 45}}
     gaya={{"posisi": "mutlak"}}
     >
     kecepatan={1,5} 
    global perbesar={0.5}
     kutub={[-0.1, Matematika.PI / 4]}
     >
    <Panggunglingkungan={batal}>
    <Modelskala={0.01} />
    Panggung>
    PresentationControls>
    Kanvas>
    div>
    div>
     );
    }
  • Kait useGLTF dari pustaka React-three-drei mendefinisikan variabel scene dan memberinya nilai file model yang terletak di jalur "/bmw.glb". Komponen kemudian mengembalikan objek primitif yang menampilkan pemandangan untuk model 3D.
  • Elemen Kanvas merender komponen utama yang menyusun model, dengan properti yang ditentukan, seperti rasio piksel perangkat (DPR), bayangan, sudut kamera, dan gaya.
  • Anda kemudian menentukan properti komponen PresentationControls seperti kecepatan dan zoom global. Properti ini menentukan bagaimana Anda akan mengontrol model di layar.
  • Terakhir, konfigurasikan komponen Stage yang memasang model di layar browser.

Jalankan server pengembangan untuk memperbarui perubahan pada aplikasi Anda. Anda harus melihat model yang diberikan pada browser Anda.

Merender Model 3D di Aplikasi Web Anda

Merender model 3D di aplikasi web Anda dapat menawarkan beberapa keuntungan, seperti meningkatkan pengalaman pengguna dengan memberikan nuansa 3D yang lebih realistis dan interaktif. Akibatnya, pengguna dapat lebih terlibat dengan produk.

Namun, merender elemen 3D dapat memiliki kelemahan seperti memengaruhi kinerja aplikasi secara negatif. Model 3D memerlukan lebih banyak sumber daya untuk dirender, yang dapat menyebabkan aplikasi Anda memuat lebih lambat.