Intégrer le plugin Mega dans votre WeChat Mini Program

Ce document vous guide pour intégrer le plugin Mega dans l'environnement Mini Program basé sur xr-frame.

Avant de commencer

• Consultez le guide de développement xr-frame et les exemples officiels xr-frame pour apprendre à utiliser le moteur XR-3D officiel de WeChat, notamment :
  • la manière d'introduire le composant xr-frame dans une page WeChat Mini Program classique ;
  • la communication entre le composant xr-frame et les composants traditionnels du Mini Program ;
  • comment obtenir ou créer un élément depuis la scene et modifier certaines propriétés comme Transform ;
  • charger et libérer des resources, par exemple des modèles GLTF.

Configuration globale

Ajoutez la dépendance au plugin Mega Mini Program dans le fichier de configuration global app.json situé à la racine du Mini Program, puis modifiez le dependency loading en injection à la demande.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //utilise la derniere version du plugin
      "provider": "wx27fa3b52b5462e8f" // id fixe du plugin de mini-programme Mega
    }
  }
}

Charger le plugin

Vous pouvez introduire le plugin via l'interface de plugin, puis utiliser directement certaines méthodes du plugin pour vérifier qu'il est correctement chargé.

Par exemple, après avoir obtenu EasyARWechatMiniprogramPlugin via l'interface requirePlugin(string path) fournie par WeChat, utilisez sa méthode isMegaTrackerSupported pour déterminer si l'appareil est pris en charge.

//si le fichier typings a deja ete importe
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
//appelle isMegaTrackerSupported pour determiner si l appareil actuel est pris en charge ; sinon, affiche une invite contextuelle
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `当前设备不支持 VK v1 和 v2，请参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "设备不支持",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

Dans cet exemple, l'interface object exposé par le plugin, easyarPlugin, est d'abord obtenu via l'interface requirePlugin(string path) fournie par WeChat. Ensuite, la méthode isMegaTrackerSupported qu'il fournit est appelée pour déterminer si l'environnement runtime actuel est disponible. Si ce n'est pas le cas, une fenêtre modale est affichée.

Introduire les types

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

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

Copiez-le dans le même répertoire du projet et référencez-le dans /typings/types/index.d.ts avec une directive triple slash :

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

Lorsque vous devez utiliser des type objects, vous pouvez obtenir le type system IMegaSystem du plugin EasyAR Mega WeChat Mini Program via getMegaSystem.

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

Vous pouvez ensuite utiliser les types exposés dans IMegaSystem pour effectuer des comparaisons de type. Par exemple, comparez state avec mega.SessionState.Running pour déterminer si la session a été initialisée avec succès :

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

Construction de la scene xr-frame (WXML)

Dans le fichier WXML de la page, le composant xr-easyar-mega doit être un child node de xr-scene et lier correctement les id de la caméra et du tracker. Si id n'est pas renseigné, le composant utilisera les premiers composants xr-camera et xr-ar-tracker trouvés dans la scene.

<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

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

Enregistrer les event callbacks du 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> 

Dans WXML, liez les events distribués par le proxy xr-frame Element. Pour le mécanisme de distribution des events de xr-frame, consultez le mécanisme d'event xr-frame.

Les events distribués par le plugin sont :

Nom de l'event	Type de paramètre	Description
SessionStateChange	SessionState	Déclenché immédiatement lorsque l'état de Session change. Le paramètre est le nouvel état de Session et sert à gérer les callbacks de début et de réussite de l'initialisation de Session.
MegaLocalizationResult	MegaLocalizationResult	Déclenché après la mise à jour complète du rendering frame qui a reçu le résultat de Mega localization. Lorsque l'event est déclenché, toutes les modifications de Transform contrôlées par EasyAR dans ce rendering frame sont terminées.
PostSessionUpdate	Aucun paramètre	Déclenché immédiatement après que Session a terminé sa mise à jour dans ce rendering frame. À ce moment, toutes les modifications de Transform contrôlées par EasyAR dans ce frame sont terminées.

AR Session

Pour la création, le démarrage et la destruction de la session, consultez contrôle du flux AR Session.

Confirmez la réussite de l'initialisation via le callback d'event sessionStateChange. Lorsque l'état devient Running, l'ARSession peut être considérée comme prête.

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

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

Dans la fonction callback onSessionStateChange() du composant xr-frame, comparez l'état de la session aux différentes valeurs enum de SessionState pour déterminer l'état actuel de la session.

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);
}

Dans le code ci-dessus, une fois l'initialisation terminée, la console doit afficher "EasyAR Session initialized succeeded. Start running."

Rubriques connexes

• Projet d'exemple complet exécutable
• Contrôle du flux AR Session
• Description du projet d'exemple