Exécuter rapidement le projet d'exemple du plugin Mega pour mini-programme WeChat

Cet article explique comment exécuter rapidement le projet d'exemple du plugin Mega pour mini-programme WeChat. Vous apprendrez à :

Mettre en place et configurer l'environnement de développement du projet d'exemple.
Tester certaines fonctions de l'exemple, notamment la localisation cloud Mega.
Afficher le fichier de masque issu des résultats de cartographie et vérifier l'alignement du modèle avec l'environnement réel.

Avant de commencer

Consultez Puis-je utiliser la fonction de localisation ? pour confirmer que la base de données de localisation a été créée et que les cartes y ont été ajoutées.

Vérifier que le mini-programme appartient à une entreprise

Important

Le plugin Mega ne prend en charge que les mini-programmes WeChat appartenant à une entreprise. Les mini-programmes enregistrés par un particulier ne peuvent pas utiliser ce plugin.

Dans l'interface d'administration du mini-programme, vérifiez que Paramètres > Informations générales > Informations sur le titulaire indique personne morale ou entrepreneur individuel.

Les fonctions Mega étant fournies sous forme de plugin, vous devez disposer d'un mini-programme WeChat appartenant à une entreprise pour l'héberger.

Même pour exécuter le projet d'exemple fourni, vous devez configurer l'AppID de votre propre mini-programme WeChat afin de le déboguer et de le prévisualiser dans les outils de développement.

Télécharger le projet d'exemple

Accédez à la page de téléchargement des outils de développement.
Après avoir accepté la Politique de confidentialité d'EasyAR, cliquez sur Télécharger.
Une fois le téléchargement terminé, décompressez localement le paquet .zip.

Configurer le projet d'exemple

Connectez-vous aux outils de développement des mini-programmes WeChat.
Importez le projet d'exemple avec les outils de développement des mini-programmes WeChat.
- Ouvrez les outils de développement, cliquez sur Importer et sélectionnez le dossier extrait sur votre ordinateur.
- Vérifiez que l'AppID correspond à celui indiqué lors de la demande de licence Mega, sélectionnez le mode Mini-programme, puis cliquez sur Créer.
Note

Un AppID incohérent entraînera l'échec de la vérification de licence
Configurer la licence Mega et le service cloud

Ouvrez miniprogram/components/sample-data/easyar-settings.ts et renseignez les champs correspondants selon les informations de licence et de service des étapes de préparation:
- Licence Mega
```
/** Votre licence Mega pour le Mini Program */
export const EasyARLicenseKey: string = "";
```
Comment obtenir une licence Mega WeChat Mini Program

Dans EasyAR Developer Center, sélectionnez Mega WeChat Mini Program.

La licence Mega WeChat Mini Program à utiliser doit exister dans la liste. Si aucune licence disponible n'existe, vérifiez si votre compte est le même que celui utilisé pour créer la base de localisation Mega.

Cliquez sur le nom du Mini Program pour obtenir sa licence Mega. Cliquez sur Copy à droite, collez-la dans easyar-settings.ts comme valeur de EasyARLicenseKey, et confirmez que son AppID associé correspond exactement à votre AppID WeChat Mini Program.
- API Key et Seceret du service cloud
```
/** Votre API Key et votre Seceret pour le service cloud */
export const EasyARAPIKey: string = "";
export const EasyARAPISecret: string = "";
```
Comment obtenir API Key et Seceret du service cloud

Dans EasyAR Developer Center, sélectionnez Cloud Service API KEY.

Si vous avez déjà créé une API Key et un Seceret du service cloud, cliquez successivement sur Copy à droite et collez-les dans easyar-settings.ts comme valeurs de EasyARAPIKey et EasyARAPISecret.

Si vous n'avez jamais créé d'API Key ni de Seceret du service cloud, créez-les comme suit:

Dans EasyAR Developer Center, sélectionnez Cloud Service API KEY > Create API KEY.

Saisissez le nom de l'application, sélectionnez les services cloud à utiliser: Mega Block et/ou Mega Landmark, puis cliquez sur Confirm.
- ServerAddress et AppID du service cloud：
```
/** ServerAddress et AppID de votre base de localisation cloud Mega */
export const MegaTrackerServerAddress: string = "";
export const MegaTrackerAppID: string = "";
```
Comment obtenir le ServerAddress et l'AppID d'une base de localisation cloud Mega

Dans EasyAR Developer Center, sélectionnez Block Cloud Localization, puis sélectionnez votre groupe de service de localisation cloud Mega.

Sélectionnez votre base de localisation cloud Mega:

Cliquez sur Key, puis obtenez ci-dessous l'AppID et le Server Address de la base de localisation cloud dans l'ordre. Cliquez sur Copy à droite et collez-les dans easyar-settings.ts comme valeurs de MegaTrackerAppID et MegaTrackerServerAddress.
Vérification rapide avec le fichier de masque issu des résultats de cartographie

Téléchargez le fichier de masque glb depuis la base de données de localisation cloud à l'aide de Télécharger le fichier de masque. Le modèle blanc 3D de l'environnement réel permet de vérifier l'alignement sans créer d'annotation.

Note

Cette méthode ne s'applique qu'aux résultats de cartographie obtenus avec la version 9.6 ou ultérieure.

Dans la base de données de localisation cloud, trouvez le Block à tester et cliquez sur Télécharger le fichier de masque dans la colonne Actions. Testez sur le site correspondant à ce Block.

Dans la fenêtre contextuelle, sélectionnez Basse précision et cliquez sur Télécharger pour réduire le coût de chargement et de rendu sur le téléphone.

Placez les fichiers glb téléchargés dans le répertoire assets du projet Mini Program (miniprogram/assets/ dans l'exemple), en conservant la position, la rotation et l'échelle d'origine de chaque modèle.

Dans miniprogram/components/sample-easyar-mega/index.ts, modifiez le src de la configuration occlusionMeshAssets pour indiquer un chemin relatif à la racine du projet Mini Program. La configuration par défaut est la suivante :
```
const occlusionMeshAssets = [
    {
        assetId: "occlusionMesh00",
        type: "gltf",
        src: "assets/Low_Poly_occlusion.glb",
        options: {}
    },
];
```
Si le masque téléchargé contient plusieurs fichiers GLB, ajoutez une entrée par fichier dans occlusionMeshAssets, avec un assetId unique et le src correspondant. L'exemple charge les fichiers, attache leurs maillages de masque au Block localisé et applique les matériaux intégrés d'affichage et d'occlusion. Utilisez le commutateur Fichier de masque sur la page pour afficher ou masquer les maillages. Les ressources sont libérées avec le composant d'exemple ; aucune logique supplémentaire de chargement ou de libération n'est nécessaire.

Exécuter le sample sur un appareil réel

Cliquez sur le bouton de prévisualisation sur appareil réel dans la barre supérieure des outils de développement du mini-programme, puis scannez le code QR pour charger le projet sur le téléphone de test.

Attention

Les composants xr-frame dotés de fonctions AR ne peuvent pas être exécutés directement dans le simulateur des outils de développement.

Note

Lors du premier lancement du projet d'exemple dans les outils de développement WeChat, une alerte peut indiquer que le plugin n'est pas autorisé. Autorisez-le depuis les outils de développement ou consultez la procédure d'intégration du plugin
Cliquez sur EasyAR Mega Samples pour ouvrir la scène AR du projet d'exemple.

Note

Si la scène AR ne s'ouvre pas, votre appareil ne prend peut-être pas en charge WeChat VisionKit. Consultez les restrictions liées aux appareils.
Le message EasyAR Session is initializing indique que la détection des plans de WeChat est en cours d'initialisation.

Astuce

Assurez-vous de tester dans un environnement bien éclairé et évitez les grands murs ou sols de couleur unie.

Pointez la caméra vers le sol ou une autre surface plane et déplacez régulièrement le téléphone de gauche à droite.
Après l'initialisation, tenez le téléphone à la verticale pour filmer l'environnement réel. Une fois la localisation réussie, Found apparaît dans les informations Debug et l'indicateur en bas à droite passe du blanc au vert.
Vérifier l'alignement du fichier de masque avec l'environnement réel

Après avoir configuré l'affichage du fichier de masque, attendez que le modèle soit chargé et que la localisation dans le Block correspondant réussisse. Activez Fichier de masque sur la page pour voir le modèle blanc 3D superposé à l'image de la caméra et vérifier son alignement avec l'environnement réel.