WeChat MiniProgram AR 3D

LÉAME chino

Actualizado

Fecha	Actualizar
2022-01-02	Nuevo: Corrección del espacio de color gamma.
2021-09-07	Nuevo: se agregó una demostración de brújula y mapa. Actualización: Se corrigió que el valor del Control de orientación del dispositivo en Android sea opuesto al de iOS.
2021-02-25	Nuevo: Escanee un código QR para actualizar la URL del modelo gltf. Actualización: 1. agregue una luz direccional para que el visor del modelo haga que el modelo tenga sombras. 2. agregue la proporción de píxeles del dispositivo para que el visor panorámico aclare la imagen.
2019-10-31	Actualizado: utilice un nuevo cargador Gltf modificado por "wechat-miniprogram". Admite formato .glb sin texturas y formato .gltf.
2019-09-17	Nuevo: un WeChat MiniProgram 3D que incluye un visor panorámico y un visor 3D que utiliza el control de orientación del dispositivo.

Introducción al MiniPrograma 3D de WeChat

Three.js es una biblioteca 3D de JavaScript.

Tres.js

Existe una versión adaptada de WeChat MiniProgram de Three.js.

miniprograma threejs

Página de índice

Visor 3D

Al hacer clic en el botón "Visor de modelos", se mostrará un visor 3D.

Podemos rotar la pantalla mediante un control de orientación del dispositivo o usando invitados.

Visor panorámico

Al hacer clic en el botón "Visor panorámico", se mostrará un visor panorámico.

pantalla de retrato

pantalla horizontal

Cuando se inicia un movimiento del dispositivo, el control de orientación del dispositivo rotará la pantalla.

Cuando detenga el movimiento de un dispositivo, utilice funciones para girar la pantalla.

Brújula y visor de mapas

Al hacer clic en el botón "Visor de brújula", se mostrará una brújula y un mapa.

Al hacer clic en el control del mapa se buscarán edificios cerca de la posición en la que se hizo clic.

Al ingresar boletos, carreteras y puntos de referencia en el cuadro de entrada, se ubicará la posición de búsqueda en el control del mapa.

como construir

El miniprograma depende de un paquete npm "tresjs-miniprograma".

paso 1: instalación npm

Paso 2: ejecute "微信开发者工具--工具--构建npm", se actualizará una carpeta "miniprogram_npm".

El proyecto incluye una carpeta "miniprogram_npm" precompilada.

Archivo: /paquete.json

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

Qué cambia en GLTFLoader.js

Puede buscar una palabra clave "2019.9.11 modificado" en GLTFLoader.js. El resultado de la búsqueda es un código modificado.

Por ejemplo, se agregó una exportación de la función "GLTF_Loader". Utilice la función para configurar el objeto "TRES" en el módulo "GLTFLoader.js".

Archivo: /utils/GLTFLoader.js

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

Configure la URL de su sitio web de modelos

El proyecto incluye un modelo gltf que se implementa en un sitio web. El valor predeterminado del parámetro "modelUrl" es la URL de un sitio web que puede ser muy lenta en su red. Puede reemplazar la URL predeterminada con la URL de un sitio web.

Descargar 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';