Executar rapidamente o projeto de exemplo do plugin Mega para o miniprograma WeChat

Este artigo explica como executar rapidamente o projeto de exemplo do plugin Mega para o miniprograma WeChat. Você aprenderá como:

Preparar e configurar o ambiente de desenvolvimento do projeto de exemplo.
Testar parte dos recursos do exemplo, incluindo a localização em nuvem Mega.
Exibir o arquivo de máscara dos resultados de mapeamento e verificar o alinhamento do modelo com o ambiente real.

Antes de começar

Consulte Posso usar a função de localização? para confirmar que o banco de dados de localização foi criado corretamente e que os mapas foram adicionados.

Confirmar que o miniprograma pertence a uma empresa

Importante

O plugin Mega suporta apenas miniprogramas WeChat pertencentes a uma empresa. Miniprogramas registrados por pessoas físicas não podem usar esse plugin.

No painel de administração do miniprograma, confirme que Configurações > Informações básicas > Informações do titular mostra pessoa jurídica empresarial ou empresário individual.

Como os recursos Mega são fornecidos por meio de um plugin, você precisa de um miniprograma WeChat pertencente a uma empresa como aplicativo host.

Mesmo para executar o projeto de exemplo fornecido, você precisa configurar o AppID do seu próprio miniprograma WeChat para depuração e prévia nas ferramentas de desenvolvimento.

Baixar o projeto de exemplo

Acesse a página de download das ferramentas de desenvolvimento.
Após aceitar a Política de privacidade da EasyAR, clique em Baixar.
Após concluir o download, extraia localmente o arquivo .zip.

Configurar o projeto de exemplo

Entre nas ferramentas de desenvolvimento de miniprogramas WeChat.
Importe o projeto de exemplo pelas ferramentas de desenvolvimento de miniprogramas WeChat.
- Abra as ferramentas de desenvolvimento, clique em Importar e selecione a pasta extraída no computador.
- Confirme que o AppID corresponde ao informado ao solicitar a licença Mega, escolha o modo Miniprograma e clique em Criar.
Nota

Um AppID inconsistente fará a verificação da licença falhar
Configurar licença Mega e serviço em nuvem

Abra miniprogram/components/sample-data/easyar-settings.ts e preencha os campos correspondentes de acordo com as informações de licença e serviço dos passos de preparação:
- Licença Mega
```
/** Sua licença Mega para o Mini Program */
export const EasyARLicenseKey: string = "";
```
Como obter uma licença Mega WeChat Mini Program

No EasyAR Developer Center, selecione Mega WeChat Mini Program.

A licença Mega WeChat Mini Program a ser usada deve existir na lista. Se não houver licença disponível, verifique se sua conta é a mesma usada para criar o banco de localização Mega.

Clique no nome do Mini Program para obter sua licença Mega. Clique em Copy à direita, cole em easyar-settings.ts como valor de EasyARLicenseKey e confirme que o AppID associado corresponde exatamente ao AppID do seu WeChat Mini Program.
- API Key e Seceret do serviço em nuvem
```
/** Sua API Key e seu Seceret do serviço em nuvem */
export const EasyARAPIKey: string = "";
export const EasyARAPISecret: string = "";
```
Como obter API Key e Seceret do serviço em nuvem

No EasyAR Developer Center, selecione Cloud Service API KEY.

Se você já criou uma API Key e Seceret do serviço em nuvem, clique em Copy à direita em sequência e cole em easyar-settings.ts como valores de EasyARAPIKey e EasyARAPISecret.

Se você ainda não criou uma API Key e Seceret do serviço em nuvem, crie da seguinte forma:

No EasyAR Developer Center, selecione Cloud Service API KEY > Create API KEY.

Digite o nome da aplicação, selecione os serviços em nuvem a usar: Mega Block e/ou Mega Landmark, e clique em Confirm.
- ServerAddress e AppID do serviço em nuvem：
```
/** ServerAddress e AppID do seu banco de dados de localização Mega em nuvem */
export const MegaTrackerServerAddress: string = "";
export const MegaTrackerAppID: string = "";
```
Como obter o ServerAddress e AppID de um banco de localização em nuvem Mega

No EasyAR Developer Center, selecione Block Cloud Localization e depois selecione seu grupo de serviço de localização em nuvem Mega.

Selecione seu banco de localização em nuvem Mega:

Clique em Key e obtenha abaixo, em sequência, o AppID e Server Address do banco de localização em nuvem. Clique em Copy à direita e cole em easyar-settings.ts como valores de MegaTrackerAppID e MegaTrackerServerAddress.
Verificação rápida com o arquivo de máscara dos resultados de mapeamento

Baixe o arquivo de máscara glb pelo comando Baixar arquivo de máscara no banco de dados de localização em nuvem. O modelo branco 3D do ambiente real permite verificar o alinhamento sem criar anotações.

Nota

Este método se aplica apenas a resultados de mapeamento da versão 9.6 ou posterior.

Encontre o Block a testar no banco de dados de localização em nuvem e clique em Baixar arquivo de máscara na coluna Ações. Faça o teste no local correspondente ao Block.

Na janela pop-up, selecione Baixa precisão e clique em Baixar para reduzir a carga de leitura e renderização no telefone.

Coloque os arquivos glb baixados no diretório assets do projeto Mini Program (miniprogram/assets/ no projeto de exemplo), preservando a posição, rotação e escala originais de cada modelo.

Em miniprogram/components/sample-easyar-mega/index.ts, altere o src da configuração occlusionMeshAssets para um caminho relativo à raiz do projeto Mini Program. A configuração padrão é:
```
const occlusionMeshAssets = [
    {
        assetId: "occlusionMesh00",
        type: "gltf",
        src: "assets/Low_Poly_occlusion.glb",
        options: {}
    },
];
```
Se a máscara baixada contiver vários arquivos GLB, adicione uma entrada para cada arquivo em occlusionMeshAssets, com um assetId exclusivo e o src correspondente. O exemplo carrega os arquivos, anexa as malhas da máscara ao Block localizado e aplica os materiais integrados de exibição e oclusão. Use o controle Arquivo de máscara na página para mostrar ou ocultar as malhas. Os recursos são liberados com o componente de exemplo; não é necessário escrever lógica adicional de carregamento ou liberação.

Executar o exemplo em dispositivo real

Clique no botão de prévia em dispositivo real na barra superior das ferramentas de desenvolvimento do miniprograma e leia o código QR para carregar o projeto no telefone de teste.

Cuidado

Os componentes xr-frame com funções AR não podem ser executados diretamente no simulador das ferramentas de desenvolvimento.

Nota

Na primeira execução do projeto de exemplo nas ferramentas de desenvolvimento WeChat, pode aparecer um aviso de que o plugin ainda não foi autorizado. Autorize-o pelas ferramentas de desenvolvimento ou consulte o procedimento de integração do plugin
Clique em EasyAR Mega Samples para abrir a cena AR do projeto de exemplo.

Nota

Se a cena AR não abrir, talvez o dispositivo não seja compatível com o WeChat VisionKit. Consulte as restrições de dispositivos.
A mensagem EasyAR Session is initializing indica que a detecção de planos do WeChat está sendo inicializada.

Dica

Certifique-se de testar em um ambiente bem iluminado e evite paredes ou pisos grandes de cor sólida.

Aponte a câmera para o chão ou outra superfície plana e mova o telefone uniformemente para os lados.
Após a inicialização, mantenha o telefone na vertical para captar o ambiente real. Quando a localização funcionar, Found aparecerá nas informações Debug e o indicador inferior direito mudará de branco para verde.
Verificar o alinhamento do arquivo de máscara com o ambiente real

Após configurar a exibição do arquivo de máscara, aguarde o carregamento do modelo e a localização bem-sucedida no Block correspondente. Ative Arquivo de máscara na página para ver o modelo branco 3D sobreposto à imagem da câmera e verificar seu alinhamento com o ambiente real.