WeChat MiniProgram AR 3D

LEIA-ME chinês

Atualizado

Data	Atualizar
2022-01-02	Novo: Correção do espaço de cores gama.
07/09/2021	Novo: Adicionada uma demonstração de bússola e mapa. Atualização: Corrigido o valor do Controle de Orientação do Dispositivo no Android é oposto ao iOS.
2021-02-25	Novo: Digitalize um código QR para atualizar a URL do modelo gltf. Atualização: 1. adicione uma luz direcional para o visualizador do modelo para fazer com que o modelo tenha sombras. 2. Adicione a proporção de pixels do dispositivo para o visualizador de panorama para tornar a imagem nítida.
31/10/2019	Atualizado: Use um novo carregador Gltf modificado por "wechat-miniprogram". Suporta formato .glb sem texturas e formato .gltf.
17/09/2019	Novo: Um WeChat MiniProgram 3D que inclui um Visualizador Panorama e um Visualizador 3D usando o controle de orientação do dispositivo.

Introdução ao WeChat MiniProgram 3D

Three.js é uma biblioteca JavaScript 3D.

Três.js

Existe uma versão adaptada do WeChat MiniProgram do Three.js.

miniprograma threejs

Página de índice

Visualizador 3D

Ao clicar no botão "Model Viewer", um visualizador 3D será mostrado.

Podemos girar a tela por meio de um controle de orientação do dispositivo ou por meio de visitas.

Visualizador de panorama

Ao clicar no botão "Visualizador Panorama", um visualizador panorâmico será mostrado.

tela retrato

tela paisagem

Ao iniciar o movimento do dispositivo, o controle de orientação do dispositivo girará a tela.

Ao interromper o movimento de um dispositivo, use os gestos para girar a tela.

Bússola e visualizador de mapas

Ao clicar no botão "Visualizador de bússola", uma bússola e um mapa serão mostrados.

Clicar no controle do mapa irá procurar edifícios próximos à posição clicada.

Inserir bilhetes, estradas e pontos de referência na caixa de entrada localizará a posição de pesquisa no controle do mapa.

Como construir

O miniprograma depende de um pacote npm "trêsjs-miniprograma".

etapa 1: instalação npm

passo 2: execute "微信开发者工具--工具--构建npm", uma pasta "miniprogram_npm" será atualizada.

O projeto inclui uma pasta “miniprogram_npm” pré-compilada.

Arquivo: /pacote.json

  "dependencies" : {
    "threejs-miniprogram" : "0.0.2"
  } 

O que muda no GLTFLoader.js

Você pode pesquisar a palavra-chave "2019.9.11 modificado" em GLTFLoader.js. O resultado da pesquisa é um código modificado.

Por exemplo, foi adicionada uma exportação da função "GLTF_Loader". Use a função para definir o objeto "TRÊS" no módulo "GLTFLoader.js".

Arquivo: /utils/GLTFLoader.js

   // 2019.9.11 modified
   // THREE.GLTFLoader = ( function () {
   export function GLTF_Loader ( THREE ) { 

Defina o URL dos modelos do seu site

O projeto inclui um modelo gltf que é colocado em um site. O valor padrão do parâmetro "modelUrl" é o URL de um site que pode ser muito lento na sua rede. Você pode substituir o URL padrão pelo URL de um site.

Baixe modelos: https://github.com/sanyuered/sanyuered.github.io/tree/master/gltf

    // set your site url of a gltf model
    const modelUrl = 'https://sanyuered.github.io/gltf/robot.glb' ;
    //const modelUrl = 'http://127.0.0.1/robot.glb';