Table of Contents

Eseguire rapidamente il sample project del plugin Mega per WeChat mini program

Questo articolo descrive come eseguire rapidamente il sample project del plugin Mega per WeChat mini program. Si imparerà a:

  • Configurare il development environment del sample project.
  • Eseguire parte delle funzioni del sample: usare Mega cloud localization.
  • Visualizzare il file maschera dai risultati di mapping.

Prima di iniziare

Confermare che il soggetto del mini program sia una enterprise entity

Importante

Il plugin Mega mini program supporta solo WeChat mini program con enterprise entity. I mini program di tipo individual entity non possono usare il plugin Mega mini program.

È necessario confermare che Settings > Basic Information > Entity Information nel mini program backend mostri enterprise legal person o individual industrial and commercial household.

Poiché le funzioni Mega sono fornite come plugin mini program, è necessario avere un WeChat mini program con enterprise entity come host environment.

Anche solo per eseguire il sample project che forniamo, è necessario configurare il proprio WeChat mini program AppID per eseguire debug e preview nel developer tool.

Scaricare il sample project

  1. Andare alla pagina di download del development tool.

  2. Dopo aver confermato EasyAR Privacy Policy, fare clic su download.

    Download Sample

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

Configurare il sample project

  1. Accedere a WeChat Mini Program Developer Tools.

  2. Usare WeChat Mini Program Developer Tools per importare il progetto di esempio.

    • Dopo aver aperto Developer Tools, fare clic sul pulsante import e selezionare la directory estratta localmente.

    Importare Developer Tools

    Selezionare directory locale

    • Assicurarsi che AppID sia uguale all'AppID inserito durante la richiesta della licenza Mega, impostare la modalità di sviluppo su Mini Program e fare clic su Create.
    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
    /** 您的小程序 Mega 许可证 */
    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
    /** 您的云服务 API Key 及 Seceret */
    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
    /** 您的 Mega 云定位库的 ServerAddress 及 AppID */
    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 dai risultati di mapping

    È possibile scaricare il file maschera glb tramite Mask file download, mostrare il modello bianco 3D della scena reale e controllare l'allineamento senza creare annotation.

    Nota

    Questo metodo vale solo per risultati di mapping versione 9.6 o successiva.

    Nel cloud localization database, trovare il Block da testare e fare clic su Mask file download nella colonna Action. Durante l'esecuzione, testare nella scena corrispondente a questo Block.

    Voce download file maschera

    Nel popup, selezionare Low precision e fare clic su Download per ridurre il carico di caricamento e rendering sul telefono.

    Scaricare file maschera

    Posizionare il file glb scaricato nella directory assets del progetto Mini Program, ad esempio miniprogram/assets/, mantenendo posizione, rotazione e scala originali.

    Il sample project include già la logica di caricamento, visualizzazione e rilascio del file. Mettere ad esempio occlusion_mesh_sd.glb in miniprogram/assets/, quindi indicare il percorso relativo in sampleAssets.occlusionMesh.src:

    src: "assets/occlusion_mesh_sd.glb",
    

    Lasciare invariati assetId, type e options di sampleAssets.occlusionMesh. Dopo aver avviato il sample, attivare lo switch Mask file nella pagina per visualizzare il modello.

Eseguire il sample su dispositivo reale

  1. Fare clic sul pulsante real-device preview nella barra superiore del Mini Program developer tool e caricare sul telefono di sviluppo scansionando il QR code.

    Attenzione

    Non è possibile simulare ed eseguire direttamente componenti xr-frame con funzionalità AR nel developer tool. Simulated run

    QR code loading

    Nota

    Quando si esegue il sample project in WeChat Developer Tools per la prima volta, se non si è ancora ottenuta la plugin permission, il tool di solito mostra un popup che indica che il plugin non è autorizzato. È possibile autorizzarlo automaticamente tramite WeChat Developer Tools oppure consultare plugin access process

  2. Fare clic su EasyAR Mega Samples per entrare nella AR scene del sample project.

    Sample entry

    Nota

    Se non è possibile entrare nella AR scene del sample project, potrebbe essere perché il device attuale non supporta il componente di algoritmo visuale VisionKit di WeChat. Per i dettagli, consultare device restrictions.

  3. Il messaggio EasyAR Session is initializing sullo schermo indica che WeChat plane detection si sta inizializzando.

    Consiglio

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

    Oscillare a velocità costante verso sinistra e destra puntando al pavimento o a un'altra plane per accelerare questo processo.

    Initialization

  4. Al termine dell'inizializzazione, tenere il telefono in verticale in modo che la camera riprenda una normale scena reale. Quando la localization riesce, nelle informazioni Debug appare Found e l'indicatore di stato in basso a destra passa da bianco a verde.

    Localization

  5. Visualizzare l'effetto occlusion

    Dopo aver completato la configurazione di visualizzazione del file maschera, quando il modello è caricato e localizzato correttamente sul Block corrispondente, è possibile vedere il modello bianco 3D sovrapposto all'immagine della camera.

    Dense occlusion

Passaggi successivi

Argomenti correlati