Mengintegrasikan plugin Mega ke dalam aplikasi mini WeChat Anda

Dokumen ini akan memandu Anda melalui proses integrasi plugin Mega dalam lingkungan aplikasi mini xr-frame.

Sebelum memulai

Lihat Panduan pengembangan xr-frame dan contoh resmi xr-frame untuk mempelajari cara menggunakan mesin XR-3D resmi yang disediakan oleh WeChat, termasuk:
- Cara memperkenalkan komponen xr-frame dalam halaman aplikasi mini WeChat biasa.
- Cara komunikasi antara komponen xr-frame dan komponen tradisional aplikasi mini.
- Cara mendapatkan atau membuat elemen dari adegan dan mengubah beberapa properti seperti Transform.
- Memuat dan melepaskan sumber daya, misalnya model GLTF.

Konfigurasi global

Tambahkan ketergantungan pada plugin aplikasi mini Mega dalam file konfigurasi global app.json di direktori root aplikasi mini, dan ubah pemuatan ketergantungan menjadi injeksi sesuai permintaan.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //Gunakan versi plugin terbaru
      "provider": "wx27fa3b52b5462e8f" // ID tetap plugin aplikasi mini Mega
    }
  }
}

Memuat plugin

Anda dapat memperkenalkan plugin melalui antarmuka plugin, dan langsung menggunakan beberapa metode plugin untuk memverifikasi apakah plugin telah dimuat dengan benar.

Misalnya, gunakan antarmuka requirePlugin(string path) yang disediakan oleh WeChat untuk mendapatkan EasyARWechatMiniprogramPlugin, lalu gunakan metodenya isMegaTrackerSupported untuk menentukan apakah perangkat mendukung.

//Jika file typings sudah dimasukkan
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
//Panggil isMegaTrackerSupported untuk menentukan apakah perangkat saat ini mendukung, jika tidak, tampilkan peringatan
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `Perangkat saat ini tidak mendukung VK v1 dan v2, silakan lihat dokumentasi resmi WeChat: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "Perangkat tidak didukung",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

Dalam contoh ini, pertama-tama diperoleh easyarPlugin yaitu objek antarmuka yang diekspos oleh plugin melalui antarmuka requirePlugin(string path) yang disediakan oleh WeChat, kemudian memanggil metode isMegaTrackerSupported yang disediakannya untuk menentukan apakah lingkungan operasi saat ini dapat digunakan. Jika tidak, peringatan akan ditampilkan.

Memperkenalkan tipe

Disarankan menggunakan Typescript untuk pengembangan.

Path dalam proyek contoh: /typings/types/easyar/lib.easyar.d.ts.

Salin ke direktori yang sama di proyek Anda, dan referensikan di /typings/types/index.d.ts dengan direktif tiga garis miring:

/// <reference path="./easyar/lib.easyar.d.ts" />

Saat perlu menggunakan objek tipe, Anda bisa mendapatkan sistem tipe plugin aplikasi mini EasyAR Mega WeChat IMegaSystem melalui getMegaSystem.

const mega: easyar.IMegaSystem = easyarPlugin.getMegaSystem();

Kemudian Anda dapat menggunakan tipe yang diekspos dalam IMegaSystem untuk perbandingan tipe, misalnya bandingkan state dengan mega.SessionState.Running untuk menentukan apakah session berhasil diinisialisasi:

const newState: easyar.SessionState = event.detail.value;
if (newState === mega.SessionState.Running) {
    console.log("EasyAR Session initialized succeeded. Start running.");
}

Penyiapan adegan xr-frame (WXML)

Dalam file WXML halaman, komponen xr-easyar-mega harus menjadi simpul anak dari xr-scene, dan mengikat id kamera dan pelacak dengan benar. Jika id tidak diisi, komponen akan menggunakan komponen xr-camera dan xr-ar-tracker pertama yang ditemukan dalam pencarian adegan.

<xr-scene id="xr-scene" ar-system="modes:Plane; planeMode: 1" bind:ready="handleReady">
    <xr-easyar-mega
        id="easyar-mega"
        camera-id="xrCamera"
        ar-tracker-id="xrARTracker"
    ></xr-easyar-mega>
    <xr-node>
        <xr-ar-tracker id="xrARTracker" mode="Plane"></xr-ar-tracker>
        <xr-camera id="xrCamera" node-id="xrCamera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
    </xr-node>
    <xr-shadow id="shadow-root" node-id="xrShadow"></xr-shadow>
</xr-scene>

Hati-Hati

planeMode dari ar-system harus disetel ke 1

Mendaftarkan callback event plugin Mega

<xr-easyar-mega
    id="easyar-mega"
    camera-id="xrCamera"
    ar-tracker-id="xrARTracker"
    bind:sessionStateChange="onSessionStateChange"
    bind:megaLocalizationResult="onMegaLocalizationResult"
    bind:postSessionUpdate="onPostSessionUpdate"
></xr-easyar-mega>

Dalam WXML, ikat event yang didistribusikan oleh proxy Elemen xr-frame. Mekanisme distribusi event xr-frame silakan lihat mekanisme event xr-frame

Event yang didistribusikan oleh plugin adalah:

Nama event	Tipe parameter	Deskripsi
`SessionStateChange`	SessionState	Dipicu segera saat status Session berubah. Parameter adalah status baru Session, digunakan untuk menangani callback awal dan keberhasilan inisialisasi Session.
`MegaLocalizationResult`	MegaLocalizationResult	Dipicu setelah pembaruan frame render hasil lokalisasi Mega selesai. Saat event dipicu, semua perubahan Transform yang dikendalikan oleh EasyAR dalam frame render tersebut telah selesai.
`PostSessionUpdate`	Tanpa parameter	Dipicu segera setelah Session menyelesaikan pembaruan dalam frame render tersebut. Saat ini, semua perubahan Transform yang dikendalikan oleh EasyAR dalam frame tersebut telah selesai.

AR Session

Pembuatan, peluncuran, dan penghancuran session silakan lihat Kontrol alur AR Session

Konfirmasi apakah inisialisasi berhasil melalui callback event sessionStateChange. Ketika status berubah menjadi Running, maka ARSession dianggap siap.

Dalam WXML, daftarkan fungsi onSessionStateChange() dalam komponen xr-frame sebagai callback event sessionStateChange melalui bind:sessionStateChange="onSessionStateChange":

<xr-easyar-mega
    bind:sessionStateChange="onSessionStateChange"
></xr-easyar-mega>

Dalam fungsi callback onSessionStateChange() di komponen xr-frame, bandingkan status session dengan setiap enumerasi SessionState untuk menentukan status session saat ini.

onSessionStateChange(event) {
    const newState: easyar.SessionState = event.detail.value;
    console.log(`EasyAR Session state changed to: ${mega.SessionState[newState]}`);
    let displayInfoStr: string = "";
    if (newState === mega.SessionState.None) {
        displayInfoStr = "EasyAR Session is inactive.";
    } else if (newState === mega.SessionState.Initializing) {
        displayInfoStr = "EasyAR Session is initializing...";
    } else if (newState === mega.SessionState.Running) {
        displayInfoStr = "EasyAR Session initialized succeeded. Start running.";
    }
    this.triggerEvent("sessionDisplayInfoEvent", displayInfoStr);
}

Dalam kode di atas, setelah inisialisasi selesai, konsol harus mencetak "EasyAR Session initialized succeeded. Start running."

Table of Contents