Table of Contents

Run the WeChat Mini Program Mega plugin example project completely

This article will introduce how to fully run the example project of the WeChat Mini Program Mega plugin (including the use of annotations).

Before you begin

  • Complete the Quickstart guide for the sample project.

  • Complete the Place 3D content using Mega Studio in Unity to obtain the annotation data package ID and annotation point ID.

    [Block cloud localization] > [Annotation data] The ID in the cloud localization library list is the annotation data package ID.

    Annotation information in the cloud localization library

    Click [View] on the right to see the uploaded annotation data names and IDs. The ID in the list on this page is the annotation point ID.

    Annotation data names in the cloud localization library

Configure Mega annotation data package ID

In miniprogram/components/sample-data/easyar-settings.ts, fill in the annotation data package ID:

/** Fill in the Mega annotation data package ID */  
export const MegaAnnotationId: string = "";

Configure the model to display for annotation points

In miniprogram/components/sample-data/annotation-metadata.ts, configure the annotations to be replaced by changing the key to the annotation point ID. If multiple replacements are needed, separate them with commas.

export const AnnotationMetaData: Record<string, any> = {  
    /** Fill in the annotation point ID */  
    "aaaaaaaa-bbbb-cccc-dddd-123456789012": {  
        assetId: "panda",  
        scale: "1 1 1"  
    },  
    "aaaaaaaa-bbbb-cccc-dddd-123456789013": {  
        assetId: "panda",  
        scale: "1 1 1"  
    }  
};

For how to record and match annotation point IDs, refer to confirm annotation data.

Real machine operation

  1. Click the real machine preview button on the top bar of the mini-program development tool to load by scanning the QR code.

    Note

    AR-enabled xr-frame components cannot be directly simulated in the development tool.

    QR code loading

  2. Click EasyAR Mega Samples to enter the AR scene of the sample project.

    Sample entry

  3. The on-screen prompt EasyAR Session is initializing indicates WeChat plane detection is initializing.

    Tip

    Ensure testing in well-lit environments, avoiding large areas of plain-colored walls or floors.

    Swing the phone steadily left and right over surfaces to accelerate this process.

    Initialization

  4. After initialization completes, hold the phone vertically to capture normal real-world scenes. When positioning succeeds, Found appears in debug information, and the status indicator at bottom-right turns green.

    Positioning

  5. GLTF models or cubes will load and render at marked positions (depending on whether assetId is configured).

    Running effect: