Table of Contents

Intégrer le plug-in Mega dans votre mini-programme WeChat

Ce document vous guidera à travers l'intégration du plug-in Mega dans un environnement de mini-programme utilisant xr-frame.

Commencer avec

  • Consultez le guide de développement xr-frame et les exemples officiels xr-frame pour apprendre à utiliser le moteur XR-3D fourni par WeChat, incluant :
    • Comment introduire le composant xr-frame dans une page de mini-programme WeChat standard.
    • Comment les composants xr-frame communiquent avec les composants traditionnels des mini-programmes.
    • Comment obtenir ou créer un élément dans une scène et modifier certaines propriétés comme Transform.
    • Charger et libérer des ressources, par exemple des modèles GLTF.

Configuration globale

Ajoutez la dépendance au plug-in Mega dans le fichier de configuration global app.json à la racine du mini-programme, et modifiez le chargement des dépendances en injection à la demande.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //Utilisez la dernière version du plug-in
      "provider": "wx27fa3b52b5462e8f" // ID fixe du plug-in Mega
    }
  }
}

Charger le plug-in

Vous pouvez importer le plug-in via l'interface de plug-in et utiliser directement certaines de ses méthodes pour vérifier qu'il a été correctement chargé.

Par exemple, en utilisant l'interface requirePlugin(string path) fournie par WeChat pour obtenir EasyARWechatMiniprogramPlugin, puis sa méthode isMegaTrackerSupported pour vérifier si l'appareil est supporté.

// Si le fichier typings est importé
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
// Appeler isMegaTrackerSupported pour vérifier la compatibilité
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `L'appareil actuel ne prend pas en charge VK v1 et v2. Consultez la documentation officielle WeChat : https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "Appareil non supporté",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

Cet exemple utilise d'abord requirePlugin(string path) pour obtenir easyarPlugin, l'objet d'interface exposé par le plug-in, puis appelle la méthode isMegaTrackerSupported pour vérifier la compatibilité. Si non supporté, une alerte s'affiche.

Importer les types

Il est recommandé d'utiliser Typescript pour le développement.

Chemin dans le projet exemple : /typings/types/easyar/lib.easyar.d.ts.

Copiez-le dans le même répertoire de votre projet, et référencez-le via une directive triple barre oblique dans /typings/types/index.d.ts :

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

Pour utiliser les objets de type, obtenez le système de types IMegaSystem du plug-in via getMegaSystem.

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

Vous pouvez ensuite utiliser les types exposés dans IMegaSystem pour des comparaisons, par exemple comparer state avec mega.SessionState.Running pour vérifier l'initialisation de la session :

const newState: easyar.SessionState = event.detail.value;
if (newState === mega.SessionState.Running) {
    console.log("Initialisation de la session EasyAR réussie. Démarrage.");
}

Construction de la scène xr-frame (WXML)

Dans le fichier WXML de la page, le composant xr-easyar-mega doit être un nœud enfant de xr-scene, avec les id de la caméra et du traqueur correctement liés. Si id n'est pas spécifié, le premier composant xr-camera et xr-ar-tracker trouvé dans la scène sera utilisé.

<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>
Attention

planeMode dans ar-system doit être défini sur 1

Enregistrer les callbacks d'événements du plug-in 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>

Dans le WXML, liez les événements distribués par le proxy d'élément xr-frame. Le mécanisme de distribution d'événements de xr-frame est décrit dans mécanisme d'événements xr-frame.

Les événements distribués par le plug-in sont :

Nom de l'événement Type de paramètre Description
SessionStateChange SessionState Déclenché immédiatement lors d'un changement d'état de Session. Le paramètre est le nouvel état, utilisé pour gérer les callbacks de début et réussite d'initialisation.
MegaLocalizationResult MegaLocalizationResult Déclenché après la mise à jour d'une frame de rendu contenant un résultat de localisation Mega. Toutes les modifications de Transform contrôlées par EasyAR dans cette frame sont terminées.
PostSessionUpdate Aucun paramètre Déclenché immédiatement après la mise à jour de la Session dans une frame de rendu. Toutes les modifications de Transform contrôlées par EasyAR sont terminées.

Session AR

La création, le démarrage et la destruction de la session sont décrits dans Contrôle du flux de Session AR

Vérifiez la réussite de l'initialisation via le callback de l'événement sessionStateChange. Lorsque l'état passe à Running, l'ARSession est prête.

Dans le WXML, enregistrez la fonction onSessionStateChange() du composant xr-frame comme callback de l'événement sessionStateChange via bind:sessionStateChange="onSessionStateChange" :

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

Dans la fonction de callback onSessionStateChange() du composant xr-frame, comparez l'état de la session avec les énumérations de SessionState pour déterminer l'état actuel.

onSessionStateChange(event) {
    const newState: easyar.SessionState = event.detail.value;
    console.log(`État de la session EasyAR changé en : ${mega.SessionState[newState]}`);
    let displayInfoStr: string = "";
    if (newState === mega.SessionState.None) {
        displayInfoStr = "Session EasyAR inactive.";
    } else if (newState === mega.SessionState.Initializing) {
        displayInfoStr = "Initialisation de la session EasyAR...";
    } else if (newState === mega.SessionState.Running) {
        displayInfoStr = "Initialisation de la session EasyAR réussie. Démarrage.";
    }
    this.triggerEvent("sessionDisplayInfoEvent", displayInfoStr);
}

Dans le code ci-dessus, après l'initialisation, la console devrait afficher "Initialisation de la session EasyAR réussie. Démarrage."

Sujets connexes