WeChat MiniProgram AR 3D

README chinois

Mis à jour

Date	Mise à jour
2022-01-02	Nouveau : correction de l'espace colorimétrique Gamma.
2021-09-07	Nouveau : Ajout d'une démo de boussole et de carte. Mise à jour : correction de la valeur du contrôle d'orientation de l'appareil sur Android qui est opposée à celle sur iOS.
2021-02-25	Nouveau : Scannez un code QR pour mettre à jour l'url du modèle gltf. Mise à jour : 1. ajoutez une lumière directionnelle pour la visionneuse de modèle afin que le modèle ait des ombres. 2. Ajoutez le rapport de pixels de l'appareil pour la visionneuse panoramique afin de rendre l'image claire.
2019-10-31	Mise à jour : utilisez un nouveau chargeur Gltf modifié par "wechat-miniprogram". Prise en charge du format .glb sans textures et du format .gltf.
2019-09-17	Nouveau : un mini-programme WeChat 3D qui comprend une visionneuse panoramique et une visionneuse 3D utilisant le contrôle d'orientation de l'appareil.

Introduction sur WeChat MiniProgram 3D

Three.js est une bibliothèque JavaScript 3D.

Trois.js

Il existe une version adaptée de WeChat MiniProgram de Three.js.

threejs-miniprogramme

Page d'index

Visionneuse 3D

Lorsque vous cliquez sur le bouton "Model Viewer", une visionneuse 3D s'affichera.

Nous pouvons faire pivoter l'écran grâce à un contrôle d'orientation de l'appareil ou en utilisant des invités.

Visionneuse panoramique

Lorsque vous cliquez sur le bouton "Panorama Viewer", une visionneuse panoramique s'affichera.

écran portrait

écran paysage

Lorsque vous démarrez un mouvement de l'appareil, le contrôle d'orientation de l'appareil fera pivoter l'écran.

Lorsque vous arrêtez le mouvement d'un appareil, utilisez des invités pour faire pivoter l'écran.

Boussole et visionneuse de cartes

Lorsque vous cliquez sur le bouton "Compass Viewer", une boussole et une carte seront affichées.

En cliquant sur le contrôle de la carte, vous rechercherez des bâtiments à proximité de la position cliquée.

La saisie de billets, de routes et de points de repère dans la zone de saisie localisera la position de recherche sur le contrôle cartographique.

Comment construire

Le mini-programme dépend d'un package npm « threejs-miniprogram ».

étape 1 : installation de npm

étape 2 : exécutez "微信开发者工具--工具--构建npm", un dossier "miniprogram_npm" sera mis à jour.

Le projet comprend un dossier "miniprogram_npm" précompilé.

Fichier : /package.json

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

Quels changements ont été apportés à GLTFLoader.js

Vous pouvez rechercher un mot-clé « 2019.9.11 modifié » dans GLTFLoader.js. Le résultat de la recherche est un code modifié.

Par exemple, ajout d'un export de fonction "GLTF_Loader". Utilisez la fonction pour définir l'objet "THREE" dans le module "GLTFLoader.js".

Fichier : /utils/GLTFLoader.js

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

Définissez l'URL des modèles sur votre site Web

Le projet comprend un modèle gltf qui est dépolyé sur un site internet. La valeur par défaut du paramètre "modelUrl" est une URL de site Web qui peut être très lente sur votre réseau. Vous pouvez remplacer l'URL par défaut par une URL de site Web.

Modèles à télécharger : 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';