Table of Contents

Menjalankan proyek contoh plugin Mega untuk Mini Program WeChat

Artikel ini menjelaskan cara menjalankan proyek contoh plugin Mega untuk Mini Program WeChat. Anda akan mempelajari cara:

  • Menyiapkan dan mengonfigurasi lingkungan pengembangan proyek contoh.
  • Mencoba lokalisasi cloud Mega melalui sebagian fitur contoh.
  • Menampilkan file mask dari hasil pemetaan dan memeriksa keselarasan model dengan lingkungan nyata.

Sebelum mulai

Pastikan Mini Program terdaftar atas nama badan usaha

Penting

Plugin Mega untuk Mini Program hanya mendukung Mini Program WeChat yang terdaftar atas nama badan usaha. Mini Program yang terdaftar atas nama perorangan tidak dapat menggunakan plugin Mega.

Di pengelolaan Mini Program, pastikan Pengaturan > Informasi dasar > Informasi pemilik menampilkan badan hukum perusahaan atau pelaku usaha perseorangan.

Karena fitur Mega disediakan sebagai plugin, Anda harus memiliki Mini Program WeChat yang terdaftar atas nama badan usaha sebagai aplikasi induk.

Meskipun hanya menjalankan proyek contoh yang kami sediakan, Anda tetap perlu mengatur AppID Mini Program WeChat milik Anda sendiri agar dapat melakukan debug dan pratinjau di alat pengembang.

Mengunduh proyek contoh

  1. Buka halaman unduhan alat pengembang.

  2. Setelah menyetujui Kebijakan Privasi EasyAR, klik unduh.

    Unduh proyek contoh

  3. Setelah unduhan selesai, ekstrak berkas .zip secara lokal.

Mengonfigurasi proyek contoh

  1. Masuk ke alat pengembang Mini Program WeChat.

  2. Impor proyek contoh dengan alat pengembang Mini Program WeChat.

    • Setelah membuka alat pengembang, klik tombol impor dan pilih direktori yang telah diekstrak di komputer.

    Impor Developer Tools

    Pilih direktori lokal

    • Pastikan AppID sama dengan AppID yang digunakan saat mengajukan lisensi Mega, pilih mode pengembangan Mini Program, lalu klik Buat.
    Catatan

    AppID yang tidak konsisten akan menyebabkan verifikasi lisensi gagal

    Opsi impor Developer Tools

  3. Mengonfigurasi lisensi Mega dan layanan cloud

    Buka file miniprogram/components/sample-data/easyar-settings.ts, lalu isi field terkait berdasarkan informasi lisensi dan layanan dari persiapan:

    • Lisensi Mega
    /** Lisensi Mega Mini Program Anda */
    export const EasyARLicenseKey: string = "";
    
    Cara mendapatkan lisensi Mega WeChat Mini Program

    Di EasyAR Developer Center, pilih Mega WeChat Mini Program.

    Daftar lisensi

    Lisensi Mega WeChat Mini Program yang akan digunakan harus ada dalam daftar. Jika tidak ada lisensi tersedia, periksa apakah akun Anda sama dengan akun yang digunakan untuk membuat basis data lokalisasi Mega.

    Klik nama Mini Program untuk mendapatkan lisensi Mega-nya. Klik Copy di kanan, tempelkan ke easyar-settings.ts sebagai nilai EasyARLicenseKey, dan pastikan AppID terkait persis sama dengan AppID WeChat Mini Program Anda.

    Detail lisensi


    • API Key dan Seceret layanan cloud
    /** API Key dan Seceret layanan cloud Anda */
    export const EasyARAPIKey: string = "";
    export const EasyARAPISecret: string = "";
    
    Cara mendapatkan API Key dan Seceret layanan cloud

    Di EasyAR Developer Center, pilih Cloud Service API KEY.

    Jika sebelumnya sudah membuat API Key dan Seceret layanan cloud, klik Copy di kanan secara berurutan, lalu tempelkan ke easyar-settings.ts sebagai nilai EasyARAPIKey dan EasyARAPISecret.

    Cloud service API KEY

    Jika sebelumnya belum pernah membuat API Key dan Seceret layanan cloud, buat dengan cara berikut:

    Di EasyAR Developer Center, pilih Cloud Service API KEY > Create API KEY.

    Buat API KEY

    Detail pembuatan API KEY

    Masukkan nama aplikasi, pilih layanan cloud yang perlu digunakan: Mega Block dan/atau Mega Landmark, lalu klik Confirm.


    • ServerAddress dan AppID layanan cloud:
    /** ServerAddress dan AppID basis data lokalisasi cloud Mega Anda */
    export const MegaTrackerServerAddress: string = "";
    export const MegaTrackerAppID: string = "";
    
    Cara mendapatkan ServerAddress dan AppID basis data lokalisasi cloud Mega

    Di EasyAR Developer Center, pilih Block Cloud Localization, lalu pilih grup layanan lokalisasi cloud Mega Anda.

    Pilih grup layanan lokalisasi cloud

    Pilih basis data lokalisasi cloud Mega Anda:

    Pilih basis data lokalisasi cloud

    Dapatkan informasi lokalisasi cloud

    Klik Key, lalu dapatkan AppID dan Server Address basis data lokalisasi cloud di bagian bawah secara berurutan. Klik Copy di kanan dan tempelkan ke easyar-settings.ts sebagai nilai MegaTrackerAppID dan MegaTrackerServerAddress.

  4. Verifikasi cepat dengan file mask dari hasil pemetaan

    Unduh file mask berformat glb melalui menu Unduh file mask pada basis data lokalisasi cloud. File ini menampilkan model putih 3D lingkungan nyata sehingga Anda dapat memeriksa keselarasan tanpa membuat anotasi.

    Catatan

    Cara ini hanya berlaku untuk hasil pemetaan versi 9.6 atau yang lebih baru.

    Temukan Block yang akan diuji di basis data lokalisasi cloud, lalu klik Unduh file mask pada kolom Tindakan. Jalankan pengujian di lokasi yang sesuai dengan Block tersebut.

    Entri unduh file mask

    Pada jendela yang muncul, pilih Presisi rendah dan klik Unduh untuk mengurangi beban pemuatan dan perenderan di ponsel.

    Unduh file mask

    Letakkan file glb yang diunduh di direktori assets proyek Mini Program (miniprogram/assets/ dalam proyek contoh), dan pertahankan posisi, rotasi, serta skala asli setiap model.

    Di miniprogram/components/sample-easyar-mega/index.ts, ubah src dalam konfigurasi occlusionMeshAssets menjadi jalur relatif terhadap akar proyek Mini Program. Konfigurasi default adalah:

    const occlusionMeshAssets = [
        {
            assetId: "occlusionMesh00",
            type: "gltf",
            src: "assets/Low_Poly_occlusion.glb",
            options: {}
        },
    ];
    

    Jika mask yang diunduh berisi beberapa file GLB, tambahkan satu entri untuk setiap file dalam occlusionMeshAssets, dengan assetId unik dan src yang sesuai. Contoh memuat file, memasang mesh mask pada Block yang telah ditemukan, dan menerapkan material tampilan serta oklusi bawaan. Gunakan sakelar File mask pada halaman untuk menampilkan atau menyembunyikan mesh. Sumber daya dilepas bersama komponen contoh; tidak perlu menulis logika pemuatan atau pelepasan tambahan.

Menjalankan sample di perangkat nyata

  1. Klik tombol pratinjau di perangkat nyata pada bilah atas alat pengembang Mini Program, lalu pindai kode QR untuk memuat proyek di ponsel pengembangan.

    Hati-Hati

    Komponen xr-frame dengan fungsi AR tidak dapat disimulasikan langsung di alat pengembang. Simulasi berjalan

    Memuat dengan kode QR

    Catatan

    Saat pertama kali menjalankan proyek contoh di alat pengembang WeChat, jika izin plugin belum diberikan, biasanya akan muncul pemberitahuan bahwa plugin belum diizinkan. Berikan izin melalui alat pengembang WeChat atau lihat proses integrasi plugin

  2. Klik EasyAR Mega Samples untuk masuk ke adegan AR proyek contoh.

    Pintu masuk contoh

    Catatan

    Jika tidak dapat masuk ke adegan AR proyek contoh, perangkat Anda mungkin tidak mendukung komponen algoritme visual WeChat VisionKit. Lihat batasan perangkat.

  3. Pesan EasyAR Session is initializing di layar berarti deteksi bidang WeChat sedang diinisialisasi.

    Kiat

    Pastikan pengujian dilakukan di lingkungan dengan cahaya cukup, dan hindari dinding atau lantai berwarna polos dengan area besar.

    Arahkan kamera ke lantai atau bidang lain, lalu gerakkan ponsel perlahan ke kiri dan kanan untuk mempercepat proses ini.

    Inisialisasi

  4. Setelah inisialisasi selesai, pegang ponsel tegak agar kamera menangkap lingkungan nyata. Setelah lokalisasi berhasil, Found muncul dalam informasi Debug dan indikator di kanan bawah berubah dari putih menjadi hijau.

    Lokalisasi

  5. Periksa keselarasan file mask dengan lingkungan nyata

    Setelah mengatur tampilan file mask, tunggu hingga model dimuat dan lokalisasi ke Block yang sesuai berhasil. Aktifkan sakelar File mask di halaman untuk melihat model putih 3D di atas gambar kamera dan memeriksa kesesuaiannya dengan lingkungan nyata.

    Oklusi padat

Langkah berikutnya

Topik terkait