Table of Contents

Integrar el complemento Mega en su miniprograma de WeChat

Este documento lo guiará a través de la integración del complemento Mega en el entorno de miniprogramas de xr-frame.

Antes de comenzar

  • Consulte la guía de desarrollo de xr-frame y los ejemplos oficiales de xr-frame para aprender a usar el motor XR-3D proporcionado oficialmente por WeChat, que incluye:
    • Cómo introducir el componente xr-frame en páginas regulares de miniprogramas de WeChat.
    • Métodos de comunicación entre el componente xr-frame y los componentes tradicionales de miniprogramas.
    • Cómo obtener o crear un elemento desde la escena y modificar propiedades como Transform.
    • Cargar y liberar recursos, por ejemplo, modelos GLTF.

Configuración global

En el archivo de configuración global app.json en el directorio raíz del miniprograma, agregue la dependencia del complemento Mega y cambie la carga de dependencias a inyección bajo demanda.

{
  "lazyCodeLoading": "requiredComponents",
  "plugins": {
    "easyar-wechat-miniprogram": {
      "version": "2.0.2", //Usa la versión más reciente del complemento
      "provider": "wx27fa3b52b5462e8f" // ID fijo del complemento Mega
    }
  }
}

Cargar el complemento

Puede introducir el complemento a través de la interfaz de complementos y usar directamente algunos de sus métodos para verificar si se ha cargado correctamente.

Por ejemplo, usando la interfaz requirePlugin(string path) proporcionada por WeChat para obtener EasyARWechatMiniprogramPlugin, luego usar su método isMegaTrackerSupported para determinar si el dispositivo es compatible.

// Si ya se han introducido archivos typings
//const easyarPlugin: easyar.EasyARWechatMiniprogramPlugin = requirePlugin("easyar-wechat-miniprogram") as easyar.EasyARWechatMiniprogramPlugin;
const easyarPlugin = requirePlugin("easyar-wechat-miniprogram") as any;
// Llama a isMegaTrackerSupported para verificar la compatibilidad del dispositivo actual, muestra una alerta si no es compatible
if (!easyarPlugin.isMegaTrackerSupported()) {
    const message = `El dispositivo actual no es compatible con VK v1 y v2, consulte la documentación oficial de WeChat: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/plane.html`;
    wx.showModal({
        title: "Dispositivo no compatible",
        content: message,
        showCancel: false,
    });
    console.error(message);
    return;
}

En este ejemplo, primero se obtiene easyarPlugin (el objeto de interfaz expuesto por el complemento) a través de la interfaz requirePlugin(string path) de WeChat, luego se llama a su método isMegaTrackerSupported para verificar la disponibilidad en el entorno de ejecución actual. Si no está disponible, se muestra una alerta.

Introducir tipos

Se recomienda usar Typescript para el desarrollo.

Ruta en el proyecto de ejemplo: /typings/types/easyar/lib.easyar.d.ts.

Cópielo a la misma ruta en su proyecto y refiérase a él con una directiva de triple barra en /typings/types/index.d.ts:

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

Cuando necesite usar objetos de tipo, puede obtener el sistema de tipos IMegaSystem del complemento EasyAR Mega para miniprogramas de WeChat a través de getMegaSystem.

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

Luego puede usar los tipos expuestos en IMegaSystem para comparaciones de tipo, por ejemplo, puede comparar state con mega.SessionState.Running para determinar si la sesión se inicializó correctamente:

const newState: easyar.SessionState = event.detail.value;
if (newState === mega.SessionState.Running) {
    console.log("EasyAR Session se inicializó correctamente. Comenzando ejecución.");
}

Configuración de la escena xr-frame (WXML)

En el archivo WXML de la página, el componente xr-easyar-mega debe ser un nodo secundario de xr-scene y enlazar correctamente los id de la cámara y el rastreador. Si no se especifica id, el componente usará el primer componente xr-camera y xr-ar-tracker que encuentre en la escena.

<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>
Precaución

planeMode de ar-system debe establecerse en 1

Registrar devoluciones de llamada de eventos del complemento 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>

Enlace eventos distribuidos por el proxy del elemento xr-frame en WXML. El mecanismo de distribución de eventos de xr-frame se puede consultar en Mecanismo de eventos de xr-frame

Los eventos distribuidos por el complemento son:

Nombre del evento Tipo de parámetro Descripción
SessionStateChange SessionState Se activa inmediatamente cuando cambia el estado de la sesión. El parámetro es el nuevo estado de la sesión, utilizado para manejar las devoluciones de llamada de inicio y éxito de la inicialización de la sesión.
MegaLocalizationResult MegaLocalizationResult Se activa después de que se complete la actualización del fotograma de renderizado que recibió el resultado de localización de Mega. Cuando se activa el evento, todos los cambios de Transform controlados por EasyAR en ese fotograma de renderizado se han completado.
PostSessionUpdate Sin parámetros Se activa inmediatamente después de que la sesión complete la actualización en ese fotograma de renderizado. En este momento, todos los cambios de Transform controlados por EasyAR en ese fotograma se han completado.

Sesión AR

La creación, inicio y destrucción de la sesión se pueden consultar en Control de flujo de la sesión AR

Confirme si la inicialización fue exitosa a través de la devolución de llamada del evento sessionStateChange. Cuando el estado cambia a Running, se puede considerar que ARSession está listo.

En WXML, registre la función onSessionStateChange() del componente xr-frame como devolución de llamada del evento sessionStateChange mediante bind:sessionStateChange="onSessionStateChange":

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

En la función de devolución de llamada onSessionStateChange() del componente xr-frame, compare el estado de la sesión con las enumeraciones de SessionState para determinar el estado actual de la sesión.

onSessionStateChange(event) {
    const newState: easyar.SessionState = event.detail.value;
    console.log(`El estado de la sesión de EasyAR cambió a: ${mega.SessionState[newState]}`);
    let displayInfoStr: string = "";
    if (newState === mega.SessionState.None) {
        displayInfoStr = "La sesión de EasyAR está inactiva.";
    } else if (newState === mega.SessionState.Initializing) {
        displayInfoStr = "La sesión de EasyAR se está inicializando...";
    } else if (newState === mega.SessionState.Running) {
        displayInfoStr = "La sesión de EasyAR se inicializó correctamente. Comenzando ejecución.";
    }
    this.triggerEvent("sessionDisplayInfoEvent", displayInfoStr);
}

En el código anterior, después de la inicialización, la consola debería imprimir "La sesión de EasyAR se inicializó correctamente. Comenzando ejecución."

Temas relacionados