Aliran Kerja Produksi React Three Fiber & Meshy AI untuk Laman Web

Menambah elemen 3D pada laman web adalah cara yang berkesan untuk mempamerkan produk atau menerangkan konsep. Namun, ia sering kali datang dengan kos prestasi yang tinggi. Model 3D yang besar dan 'library' yang kompleks boleh melambatkan masa muat halaman, terutamanya pada rangkaian mudah alih yang biasa di Malaysia. Cabarannya adalah untuk memberikan pengalaman 3D premium tanpa menjejaskan kelajuan.

Alat AI seperti Meshy telah menjadikan penciptaan aset 3D lebih mudah diakses. Daripada pemodelan manual yang memakan masa berminggu-minggu, anda boleh menjana model asas daripada arahan teks dalam beberapa minit. Artikel ini menggariskan aliran kerja React Three Fiber Meshy yang praktikal dan sedia untuk produksi yang kami gunakan di JRV Systems, dari satu idea ringkas kepada elemen interaktif yang sangat dioptimumkan di laman web.

Menerangkan Aliran Kerja React Three Fiber & Meshy

Aliran kerja atau 'pipeline' ini adalah satu siri langkah, bukan satu alat tunggal. Ia adalah proses yang direka untuk mengekalkan kualiti sambil mengoptimumkan prestasi web secara agresif. Setiap peringkat mempunyai tujuan tertentu:

• Meshy AI: Titik permulaan. Kami menggunakan API teks-ke-3D untuk menjana model 3D awal. Ia pantas untuk prototaip dan mencipta aset unik yang tidak terdapat dalam 'library' standard.
• Blender: Peringkat penambahbaikan. Output AI mentah jarang sekali sempurna. Kami menggunakan Blender, perisian 3D sumber terbuka yang percuma dan hebat, untuk membersihkan geometri model, mempermudahkan bahan ('materials'), dan menyediakannya untuk web.
• gltfpack: Enjin pemampatan. Alat baris perintah ('command-line') ini penting untuk mengecilkan saiz fail model. Ia melakukan pengoptimuman mesh dan tekstur canggih yang melangkaui 'export' biasa.
• React Three Fiber (R3F): Lapisan paparan ('rendering'). R3F membolehkan kami menguruskan babak 3D sebagai komponen React deklaratif, menjadikannya mudah untuk diintegrasikan ke dalam aplikasi web kami dan menguruskan 'state'.

Pendekatan berstruktur ini memastikan kami tidak hanya meletakkan model yang berat dan tidak dioptimumkan ke laman web. Matlamatnya adalah untuk menghasilkan aset GLB akhir di bawah 100KB yang dimuat serta-merta.

Langkah 1: Menjana Model Asas dengan Meshy

Semuanya bermula dengan arahan teks ('prompt'). Kualiti 'prompt' anda secara langsung mempengaruhi kualiti model awal. Daripada arahan mudah seperti "sebuah kerusi," 'prompt' yang lebih baik ialah "kerusi rehat Scandinavian minimalis, kayu oak cerah, dengan kusyen kain kelabu, pencahayaan studio."

API Meshy beroperasi menggunakan sistem kredit. Penjanaan teks-ke-3D yang biasa mungkin berharga sekitar 20 kredit. Anda akan menerima model dalam format seperti GLB, yang merupakan standard untuk 3D web. Output awal selalunya mempunyai poligon yang tinggi dan bahan yang kompleks. Ini adalah bahan mentah kita, bukan produk akhir.

Sebagai contoh, baru-baru ini kami mengusahakan konsep untuk laman e-dagang jenama perabot tempatan. Kami menggunakan Meshy untuk menjana gaya kerusi yang berbeza dengan pantas. Ini membolehkan kami menggambarkan pilihan dalam ruang 3D jauh lebih cepat daripada pemodelan tradisional.

Langkah 2: Memperhalusi dan Memampatkan dengan Blender & gltfpack

Ini adalah langkah paling kritikal untuk prestasi. Model 10MB mentah dari Meshy tidak boleh digunakan di web. Sasaran kami adalah di bawah 100KB.

Pertama, kami import fail GLB ke dalam Blender. Di sini, kami melakukan beberapa tindakan:

• Decimation: Kami mengurangkan bilangan poligon, membuang perincian geometri yang tidak kelihatan dari jauh.
• Penyatuan Bahan: Kami mempermudahkan bahan dan menggabungkan tekstur ke dalam satu fail imej yang lebih kecil ('texture atlas').
• Pembersihan: Kami membetulkan sebarang 'flipped normals' atau geometri 'non-manifold' yang mungkin dihasilkan oleh AI.

Setelah diperhalusi dalam Blender, kami 'export' semula sebagai GLB. Langkah terakhir ialah menjalankannya melalui gltfpack. Alat dari 'library' meshoptimizer ini sangat luar biasa. Satu arahan mudah boleh mengurangkan saiz fail secara drastik:

gltfpack -i model.glb -o model-opt.glb -cc

Bendera -cc menggunakan satu set teknik pemampatan, selalunya mengurangkan saiz fail sebanyak 50-80% lagi tanpa kehilangan kualiti visual yang ketara. Langkah ini sahaja boleh menjadi perbezaan antara masa muat 5 saat dan 500 milisaat.

Langkah 3: Memuatkan Model Secara 'Lazy-Loading' dalam R3F

Sekarang kita mempunyai fail model-opt.glb yang kecil, kita perlu memuatkannya dengan cekap. Memuatkan model 3D bermakna memuatkan 'library' Three.js (ratusan kilobait) dan model itu sendiri. Melakukan ini semasa muat halaman awal adalah satu pembaziran jika model itu tidak kelihatan pun.

Solusi kami adalah untuk mengawal keseluruhan kanvas 3D menggunakan IntersectionObserver. Ini adalah API pelayar web yang mengesan apabila sesuatu elemen memasuki skrin. Inilah logiknya:

1. Cipta satu div kosong di mana babak 3D akan diletakkan.
2. Gunakan IntersectionObserver untuk memantau div ini.
3. Hanya apabila pengguna 'scroll' dan div itu kelihatan, barulah kami memuatkan dan memaparkan komponen R3F <Canvas> yang mengandungi model kami.

Teknik ini memastikan aset 3D tidak memberi kesan sama sekali pada metrik muat halaman awal, seperti First Contentful Paint (FCP). Pengguna mendapat halaman yang pantas, dan pengalaman 3D dimuatkan tepat pada masanya.

Kenapa Tidak Guna Spline Sahaja?

Spline adalah alat berasaskan pelayar web yang sangat baik untuk mencipta babak 3D, dan kami kadangkala mengesyorkannya. Walau bagaimanapun, untuk aliran kerja React Three Fiber Meshy yang berasaskan komponen dan kod, Spline tidak selalunya menjadi alat utama yang tepat.

Spline adalah satu ekosistem yang lengkap. Ia hebat untuk membina keseluruhan babak interaktif secara visual. Tetapi apabila anda perlu mengintegrasikan objek 3D secara mendalam dengan 'state' aplikasi anda, atau apabila anda memerlukan kawalan mutlak ke atas pemampatan aset sehingga ke kilobait terakhir, aliran kerja R3F adalah lebih unggul.

Kami melihat Spline sebagai "jalan keluar kecemasan" yang bernilai. Jika pelanggan memerlukan animasi kompleks berasaskan fizik yang sukar untuk dikodkan, membinanya dalam Spline dan mengeksportnya boleh jadi lebih pantas. Tetapi untuk mengintegrasikan model tunggal yang sangat dioptimumkan yang dijana melalui AI ke dalam aplikasi React yang lebih besar, aliran kerja kami memberikan lebih banyak kawalan dan hasil prestasi yang lebih baik.