Table of Contents

Eseguire rapidamente il progetto di esempio del plugin Mega per il mini-programma WeChat

Questo articolo spiega come eseguire rapidamente il progetto di esempio del plugin Mega per il mini-programma WeChat. Si imparerà a:

  • Configurare l'ambiente di sviluppo del progetto di esempio.
  • Provare alcune funzioni dell'esempio, tra cui la localizzazione cloud Mega.
  • Visualizzare il file maschera dei risultati di mappatura e verificare l'allineamento del modello con l'ambiente reale.

Prima di iniziare

Verificare che il mini-programma appartenga a un'azienda

Importante

Il plugin Mega supporta solo mini-programmi WeChat intestati a un'azienda. I mini-programmi intestati a privati non possono utilizzare questo plugin.

Nella console di gestione del mini-programma, verificare che Impostazioni > Informazioni di base > Informazioni sul titolare riporti persona giuridica aziendale o imprenditore individuale.

Poiché le funzioni Mega sono fornite come plugin, è necessario un mini-programma WeChat intestato a un'azienda come applicazione host.

Anche per eseguire il progetto di esempio fornito, occorre configurare l'AppID del proprio mini-programma WeChat per il debug e l'anteprima negli strumenti di sviluppo.

Scaricare il progetto di esempio

  1. Aprire la pagina di download degli strumenti di sviluppo.

  2. Dopo aver accettato l'Informativa sulla privacy di EasyAR, fare clic su Scarica.

    Scaricare il progetto di esempio

  3. Al termine del download, decomprimere localmente il pacchetto .zip.

Configurare il progetto di esempio

  1. Accedere agli strumenti di sviluppo dei mini-programmi WeChat.

  2. Importare il progetto di esempio con gli strumenti di sviluppo dei mini-programmi WeChat.

    • Aprire gli strumenti di sviluppo, fare clic su Importa e selezionare la cartella estratta sul computer.

    Importare Developer Tools

    Selezionare directory locale

    • Verificare che l'AppID corrisponda a quello indicato nella richiesta della licenza Mega, scegliere la modalità Mini-programma e fare clic su Crea.
    Nota

    Un AppID non coerente causerà il fallimento della verifica della licenza

    Opzioni di importazione Developer Tools

  3. Configurare licenza Mega e servizio cloud

    Aprire miniprogram/components/sample-data/easyar-settings.ts e compilare i campi corrispondenti in base alle informazioni di licenza e servizio preparate:

    • Licenza Mega
    /** La tua licenza Mega per il Mini Program */
    export const EasyARLicenseKey: string = "";
    
    Come ottenere una licenza Mega WeChat Mini Program

    In EasyAR Developer Center, selezionare Mega WeChat Mini Program.

    Elenco licenze

    La licenza Mega WeChat Mini Program da usare dovrebbe essere presente nell'elenco. Se non esiste una licenza disponibile, verificare che l'account sia lo stesso usato per creare il database di localizzazione Mega.

    Fare clic sul nome del Mini Program per ottenere la sua licenza Mega. Fare clic su Copy a destra, incollarla in easyar-settings.ts come valore di EasyARLicenseKey e confermare che l'AppID associato coincida esattamente con l'AppID del proprio WeChat Mini Program.

    Dettagli licenza


    • API Key e Seceret del servizio cloud
    /** La tua API Key e il Seceret del servizio cloud */
    export const EasyARAPIKey: string = "";
    export const EasyARAPISecret: string = "";
    
    Come ottenere API Key e Seceret del servizio cloud

    In EasyAR Developer Center, selezionare Cloud Service API KEY.

    Se sono già stati creati API Key e Seceret del servizio cloud, fare clic su Copy a destra in sequenza e incollarli in easyar-settings.ts come valori di EasyARAPIKey e EasyARAPISecret.

    Cloud service API KEY

    Se non sono mai stati creati API Key e Seceret del servizio cloud, crearli nel modo seguente:

    In EasyAR Developer Center, selezionare Cloud Service API KEY > Create API KEY.

    Creare API KEY

    Dettagli creazione API KEY

    Inserire il nome dell'applicazione, selezionare i servizi cloud da usare: Mega Block e/o Mega Landmark, quindi fare clic su Confirm.


    • ServerAddress e AppID del servizio cloud:
    /** ServerAddress e AppID del tuo database di localizzazione cloud Mega */
    export const MegaTrackerServerAddress: string = "";
    export const MegaTrackerAppID: string = "";
    
    Come ottenere ServerAddress e AppID di un database di localizzazione cloud Mega

    In EasyAR Developer Center, selezionare Block Cloud Localization, quindi il proprio gruppo di servizi di localizzazione cloud Mega.

    Selezionare gruppo servizio localizzazione cloud

    Selezionare il proprio database di localizzazione cloud Mega:

    Selezionare database di localizzazione cloud

    Ottenere informazioni di localizzazione cloud

    Fare clic su Key, quindi ottenere in sequenza AppID e Server Address del database di localizzazione cloud. Fare clic su Copy a destra e incollarli in easyar-settings.ts come valori di MegaTrackerAppID e MegaTrackerServerAddress.

  4. Verifica rapida con il file maschera dei risultati di mappatura

    Scaricare il file maschera glb dal database di localizzazione cloud tramite Scarica file maschera. Il modello bianco 3D dell'ambiente reale consente di verificarne l'allineamento senza creare annotazioni.

    Nota

    Questo metodo vale solo per risultati di mappatura dalla versione 9.6 in poi.

    Individuare il Block da testare nel database di localizzazione cloud e fare clic su Scarica file maschera nella colonna Azioni. Eseguire la prova sul luogo corrispondente al Block.

    Voce download file maschera

    Nella finestra popup, selezionare Bassa precisione e fare clic su Scarica per ridurre il carico di lettura e rendering sul telefono.

    Scaricare file maschera

    Inserire i file glb scaricati nella directory assets del progetto Mini Program (miniprogram/assets/ nel progetto di esempio), conservando posizione, rotazione e scala originali di ogni modello.

    In miniprogram/components/sample-easyar-mega/index.ts, modificare src nella configurazione occlusionMeshAssets con un percorso relativo alla radice del progetto Mini Program. La configurazione predefinita è:

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

    Se la maschera scaricata contiene più file GLB, aggiungere una voce per ogni file in occlusionMeshAssets, con un assetId univoco e il relativo src. L'esempio carica i file, collega le mesh della maschera al Block localizzato e applica i materiali integrati per la visualizzazione e l'occlusione. Usare l'interruttore File maschera nella pagina per mostrare o nascondere le mesh. Le risorse vengono rilasciate insieme al componente di esempio; non serve scrivere altra logica di caricamento o rilascio.

Eseguire il sample su dispositivo reale

  1. Fare clic sul pulsante di anteprima su dispositivo reale nella barra superiore degli strumenti di sviluppo del mini-programma e scansionare il codice QR per caricare il progetto sul telefono di prova.

    Attenzione

    I componenti xr-frame con funzioni AR non possono essere eseguiti direttamente nel simulatore degli strumenti di sviluppo. Esecuzione simulata

    Caricamento tramite codice QR

    Nota

    Al primo avvio del progetto di esempio negli strumenti di sviluppo WeChat, se il plugin non è ancora autorizzato, di solito compare un avviso. Autorizzarlo negli strumenti di sviluppo o consultare la procedura di integrazione del plugin

  2. Fare clic su EasyAR Mega Samples per aprire la scena AR del progetto di esempio.

    Ingresso nell'esempio

    Nota

    Se la scena AR non si apre, il dispositivo potrebbe non supportare WeChat VisionKit. Consultare le limitazioni dei dispositivi.

  3. Il messaggio EasyAR Session is initializing indica che il rilevamento dei piani di WeChat è in fase di inizializzazione.

    Consiglio

    Assicurarsi di testare in un ambiente ben illuminato ed evitare grandi pareti o pavimenti a tinta unita.

    Puntare la fotocamera verso il pavimento o un'altra superficie piana e muovere il telefono uniformemente da sinistra a destra.

    Inizializzazione

  4. Dopo l'inizializzazione, tenere il telefono in verticale per inquadrare l'ambiente reale. Quando la localizzazione riesce, nelle informazioni Debug appare Found e l'indicatore in basso a destra passa dal bianco al verde.

    Localizzazione

  5. Verificare l'allineamento del file maschera con l'ambiente reale

    Dopo aver configurato la visualizzazione del file maschera, attendere che il modello venga caricato e che la localizzazione nel Block corrispondente riesca. Attivare File maschera nella pagina per vedere il modello bianco 3D sovrapposto all'immagine della fotocamera e verificarne l'allineamento con l'ambiente reale.

    Occlusione densa

Passaggi successivi

Argomenti correlati