Table of Contents

完整運行微信小程序 Mega 插件示例工程

這篇文章將介紹如何完整運行微信小程序 Mega 插件的示例項目（包含標註的使用）。

開始之前

配置 Mega 標註數據包 ID

在 miniprogram/components/sample-data/easyar-settings.ts 中填入標註數據包 ID：

/** 填 Mega 標註數據包 ID */
export const MegaAnnotationId: string = "";

配置標註點要展示的模型

在 miniprogram/components/sample-data/annotation-metadata.ts 中通過將 key 改成標註點 id 配置要替換的標註，如果要替換多個則用逗號隔開。

export const AnnotationMetaData: Record<string, any> = {
    /** 填標註點 ID */
    "aaaaaaaa-bbbb-cccc-dddd-123456789012": {
        assetId: "panda",
        scale: "1 1 1"
    },
    "aaaaaaaa-bbbb-cccc-dddd-123456789013": {
        assetId: "panda",
        scale: "1 1 1"
    }
};

關於如何記錄和對應標註點 ID 可以參考確認標註數據。

實機運行

  1. 點擊小程序開發工具上方欄的實機預覽按鈕，通過掃描二維碼加載。

    附註

    不能在開發工具上直接模擬運行帶有 AR 功能的 xr-frame 組件。

    二維碼加載

  2. 點擊 EasyAR Mega Samples 進入示例項目的 AR 場景。

    Sample入口

  3. 屏幕中提示 EasyAR Session is initializing 表示微信平面檢測正在初始化。

    提示

    確保在光線充足的環境下測試，避開大面積純色牆面或純色地板。

    對著地面或其他平面勻速左右擺動以加快這個過程。

    初始化

  4. 初始化完成後，將手機豎直使相機拍到正常的現實畫面，當定位成功， debug 信息中出現 Found 字樣，並且右下方的狀態指示物變爲綠色。

    定位

  5. 將在標註的位置加載並渲染 GLTF 模型或方塊（取決於是否配置了 assetId）。

    運行效果：

相關主題