Подключение плагина Mega к вашему WeChat Mini Program

Этот документ поможет вам выполнить подключение плагина Mega в среде Mini Program на xr-frame.

Перед началом

• Ознакомьтесь с руководством по разработке xr-frame и официальными примерами xr-frame, чтобы изучить использование официального XR-3D engine WeChat, включая:
  • способ подключения компонента xr-frame к обычной странице WeChat Mini Program;
  • способ обмена данными между компонентом xr-frame и традиционными компонентами Mini Program;
  • получение или создание элемента из scene и изменение части его свойств, например Transform;
  • загрузку и освобождение resources, например GLTF models.

Глобальная конфигурация

Добавьте зависимость от плагина Mega Mini Program в глобальный конфигурационный файл app.json в корневом каталоге Mini Program и измените dependency loading на инъекцию по требованию.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //используйте последнюю версию plugin
      "provider": "wx27fa3b52b5462e8f" // фиксированный id plugin Mini Program Mega
    }
  }
}

Загрузка плагина

Плагин можно подключить через plugin interface, а затем напрямую вызвать часть его методов, чтобы проверить, что плагин загружен корректно.

Например, после получения EasyARWechatMiniprogramPlugin через предоставленный WeChat interface requirePlugin(string path) используйте его метод isMegaTrackerSupported, чтобы определить, поддерживается ли устройство.

//если файл typings уже импортирован
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
//вызовите isMegaTrackerSupported, чтобы определить, поддерживается ли текущее устройство; если нет, покажите всплывающее сообщение
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `当前设备不支持 VK v1 和 v2，请参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "设备不支持",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

В этом примере сначала через interface requirePlugin(string path), предоставленный WeChat, получен easyarPlugin, то есть object interface, экспортируемый плагином. Затем вызывается предоставленный им метод isMegaTrackerSupported, чтобы определить доступность текущей runtime environment. Если она недоступна, отображается модальное уведомление.

Подключение типов

Для разработки рекомендуется использовать Typescript.

Путь в sample project: /typings/types/easyar/lib.easyar.d.ts.

Скопируйте файл в тот же каталог проекта и подключите его в /typings/types/index.d.ts с помощью triple-slash directive:

/// <reference path="./easyar/lib.easyar.d.ts" />

Когда нужно использовать type object, type system IMegaSystem плагина EasyAR Mega WeChat Mini Program можно получить через getMegaSystem.

const mega: easyar.IMegaSystem = easyarPlugin.getMegaSystem();

После этого можно использовать типы, экспортируемые в IMegaSystem, для сравнения типов. Например, можно сравнить state с mega.SessionState.Running, чтобы определить, успешно ли инициализирован session:

const newState: easyar.SessionState = event.detail.value;
if (newState === mega.SessionState.Running) {
    console.log("EasyAR Session initialized succeeded. Start running.");
}

Настройка xr-frame scene (WXML)

В WXML-файле страницы компонент xr-easyar-mega должен быть child node компонента xr-scene, а id камеры и tracker должны быть привязаны корректно. Если id не указан, компонент будет использовать первые найденные в scene компоненты xr-camera и xr-ar-tracker.

<xr-scene id="xr-scene" ar-system="modes:Plane; planeMode: 1" bind:ready="handleReady">
    <xr-easyar-mega
        id="easyar-mega"
        camera-id="xrCamera"
        ar-tracker-id="xrARTracker"
    ></xr-easyar-mega>
    <xr-node>
        <xr-ar-tracker id="xrARTracker" mode="Plane"></xr-ar-tracker>
        <xr-camera id="xrCamera" node-id="xrCamera" clear-color="0.925 0.925 0.925 1" background="ar" is-ar-camera></xr-camera>
    </xr-node>
    <xr-shadow id="shadow-root" node-id="xrShadow"></xr-shadow>
</xr-scene>

Осторожно

planeMode в ar-system должен быть установлен в 1

Регистрация event callback плагина Mega

<xr-easyar-mega
    id="easyar-mega"
    camera-id="xrCamera"
    ar-tracker-id="xrARTracker"
    bind:sessionStateChange="onSessionStateChange"
    bind:megaLocalizationResult="onMegaLocalizationResult"
    bind:postSessionUpdate="onPostSessionUpdate"
></xr-easyar-mega> 

В WXML привяжите events, распространяемые proxy xr-frame Element. О механизме распространения events в xr-frame см. механизм events xr-frame.

Events, распространяемые плагином:

Название event	Тип параметра	Описание
SessionStateChange	SessionState	Немедленно вызывается при изменении состояния Session. Параметр содержит новое состояние Session и используется для callback начала и успешного завершения инициализации Session.
MegaLocalizationResult	MegaLocalizationResult	Вызывается после завершения обновления rendering frame, получившего результат Mega localization. Когда event вызывается, все изменения Transform, управляемые EasyAR в этом rendering frame, уже завершены.
PostSessionUpdate	Без параметров	Вызывается сразу после завершения обновления Session в текущем rendering frame. В этот момент все изменения Transform, управляемые EasyAR в данном frame, уже завершены.

AR Session

Создание, запуск и уничтожение session см. в управлении процессом AR Session.

Подтвердите успешность инициализации через callback event sessionStateChange. Когда состояние становится Running, ARSession можно считать готовой.

В WXML зарегистрируйте функцию onSessionStateChange() из компонента xr-frame как callback event sessionStateChange с помощью bind:sessionStateChange="onSessionStateChange":

<xr-easyar-mega
    bind:sessionStateChange="onSessionStateChange"
></xr-easyar-mega>

В callback-функции onSessionStateChange() компонента xr-frame можно сравнивать состояние session с enum-значениями SessionState, чтобы определить текущее состояние session.

onSessionStateChange(event) {
    const newState: easyar.SessionState = event.detail.value;
    console.log(`EasyAR Session state changed to: ${mega.SessionState[newState]}`);
    let displayInfoStr: string = "";
    if (newState === mega.SessionState.None) {
        displayInfoStr = "EasyAR Session is inactive.";
    } else if (newState === mega.SessionState.Initializing) {
        displayInfoStr = "EasyAR Session is initializing...";
    } else if (newState === mega.SessionState.Running) {
        displayInfoStr = "EasyAR Session initialized succeeded. Start running.";
    }
    this.triggerEvent("sessionDisplayInfoEvent", displayInfoStr);
}

В приведенном выше коде после завершения инициализации console должен вывести "EasyAR Session initialized succeeded. Start running."

Связанные темы

• Полный запускаемый sample project
• Управление процессом AR Session
• Описание sample project