Description du projet d'exemple du plugin Mega pour mini-programmes WeChat
Cet article décrit en détail l'utilisation des fonctions présentées dans le projet d'exemple, leur mode d'implémentation et les points à noter.
Avant de commencer
- Vous pouvez créer et téléverser des annotations avec l'éditeur Unity, puis noter le nom de l'annotation et son ID.
- Vous pouvez créer avec l'éditeur Unity du contenu 3D aligné sur le monde réel.
- Vous pouvez exécuter entièrement le projet d'exemple.
Comment afficher un modèle à la position d'une annotation
Placer et uploader précisément les annotations dans l'éditeur Unity, puis enregistrer le nom d'annotation et son ID
Ajouter des ressources de modèle GLTF
Ajoutez la ressource de modèle à
sampleAssetsdansminiprogram/components/sample-easyar-mega/index.ts.const sampleAssets = { your_model_name: { assetId: "your_model_asset_id", type: "gltf", src: "url/model.glb", options: {} } }Charger la ressource de modèle ajoutée
Chargez le modèle dans la fonction
loadAsset()deminiprogram/components/sample-easyar-mega/index.ts.async loadAsset() { try { await scene.assets.loadAsset(sampleAssets.your_model_name); } catch (err) { console.error(`Failed to load assets: ${err.message}`); } }Configurer les annotations à remplacer
Configurez les annotations à remplacer dans
miniprogram/components/sample-data/annotation-metadata.ts. Si plusieurs annotations doivent être remplacées, séparez-les par des virgules.export const AnnotationMetaData: Record<string, any> = { "aaaaaaaa-bbbb-cccc-dddd-123456789012": { assetId: "panda", scale: "0.5 0.5 0.5" }, "aaaaaaaa-bbbb-cccc-dddd-123456789013": { assetId: "your_model_asset_id", scale: "1 1 1" } };Remplacer les annotations et charger les modèles
Dans le callback après le chargement d'EMA, utilisez la « méthode factory » de xr-frame
scene.createElement(xrFrameSystem.XRGLTF, options)pour créer le nœud de modèle.Paramètres:
xrFrameSystem.XRGLTF: indique que le type d'élément à créer est un modèle GLTF.options: éléments de configuration d'initialisation correspondant aux propriétés du composant.
Propriétés clés dans le code:
"model": obligatoire. Pointe vers l'ID de ressource chargé (asset-id)."anim-autoplay": facultatif. Spécifie le nom de l'animation à lire automatiquement après le chargement."scale": facultatif.assetInfo.scaleou "1 1 1".name: obligatoire. Nom de l'annotation.
Attention
Veillez à distinguer les clés de propriété string et non-string, et renseignez-les exactement comme dans l'exemple.
Montez le modèle sous le nœud d'annotation avec
xrNode.addChild(child).Pour garantir que le modèle GLTF ait le même rendu avec les chargeurs de différentes plateformes, faites pivoter le modèle chargé de 180 degrés autour de l'axe Y sur place.
if (assetInfo && assetInfo.assetId && assetInfo.assetId.trim().length > 0) { model = scene.createElement( xrFrameSystem.XRGLTF, { /** assetId de l’étape précédente */ "model": assetInfo.assetId, /** L’animation du modèle à lire peut être spécifiée ici */ "anim-autoplay": assetInfo.animation ? assetInfo.animation : "", "scale": assetInfo.scale ? assetInfo.scale : "1 1 1", name: emaName } ); xrNode.addChild(model); /** * En raison des différences de comportement des chargeurs GLTF, pour que l’orientation du modèle dans xr-frame corresponde exactement au rendu de Unity * Le modèle chargé doit être pivoté de 180 degrés autour de l’axe Y sur place */ let modelTransform = model.getComponent(xrFrameSystem.Transform); let currentRotation = modelTransform.quaternion.clone(); let targetRotation = currentRotation.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0)); modelTransform.quaternion.set(targetRotation); }Exécution sur appareil
Le résultat de l'exécution sur appareil est indiqué ci-dessous et peut être comparé à la position dans l'éditeur Unity à l'étape 1:
Activez le bouton vidéo transparente à gauche. Un cube avec matériau vidéo transparent apparaît à l'origine du système de coordonnées monde, à la position
(0, 0, 0).Note
La position de l'origine peut être une position aléatoire dans l'espace. Vous pouvez utiliser les annotations pour placer le modèle d'occlusion à la position souhaitée. Voir créer et uploader des annotations avec l'éditeur Unity.
Activez le bouton d'occlusion à gauche. À l'origine du système de coordonnées monde, position
(0, 0, 0), apparaissent un modèle de panda et des cubes empilés verticalement. Le cube du milieu possède un matériau d'occlusion, et de l'autre côté se trouve un modèle de panda statique avec matériau d'occlusion.Note
La position de l'origine peut être une position aléatoire dans l'espace. Vous pouvez utiliser les annotations pour placer le modèle d'occlusion à la position souhaitée. Voir créer et uploader des annotations avec l'éditeur Unity.
Comment lire une vidéo transparente à la position d'une annotation
Charger une ressource vidéo de type
video-texture.async loadAsset() { const videoTexture = { assetId: "fireball", type: "video-texture", // 视频资源 URL src: "url/video-resource.mp4", options: { autoPlay: true, loop: true, } }; try { // 加载 video-texture 类型资源 await scene.assets.loadAsset(videoTexture); } catch (err) { console.error(`Failed to load video texture: ${err.message}`); } }Modifier le callback de chargement EMA
Dans le callback de chargement EMA, utilisez
scene.createElement(xrFrameSystem.XRMesh,options)pour créer une géométrie simple, lui attribuer le matériaueasyar-video-tsbs, puis modifieruniformenu_baseColorMap:video-{$assetId}.Paramètres :
xrFrameSystem.XRMesh: spécifie que le type d'élément créé est une géométrie de base.options: éléments de configuration d'initialisation correspondant aux propriétés du composant.
Propriétés clés dans le code :
"geometry": "cube": utilise les données de géométrie de cube intégrées à xr-frame."material": "easyar-video-tsbs": spécifie un matériau prédéfini. D'après son nom, il s'agit probablement d'un matériau spécial prenant en charge les textures vidéo."uniforms": "u_baseColorMap:video-{$assetId}":
Attention
Veillez à distinguer les property Key de type chaîne et non chaîne, et remplissez-les exactement comme dans l'exemple.
Il s'agit d'une liaison dynamique d'un paramètre de matériau.
Elle mappe la ressource vidéo (texture) nommée
video-{$assetId}sur la carte de couleur de base du matériau.Effet : cela crée un cube dont la surface lit une vidéo.
model = scene.createElement(xrFrameSystem.XRMesh, { geometry: "cube", material: "easyar-video-tsbs", uniforms: "u_baseColorMap:video-fireball", }); xrNode.addChild(model);Note
Lors de l'utilisation de
video-texture, si la console affiche l'avertissementwx.createVideoDecoder with type: 'wemedia' is deprecated, ignorez-le.Nous avons confirmé avec l'équipe officielle WeChat que cet avertissement n'affecte pas l'utilisation.
Exécuter sur un appareil réel
Comment placer un modèle d'occlusion aligné avec l'espace
Placez précisément le modèle utilisé pour occlusion et téléversez l'annotation.
Chargez le GLTF utilisé comme occlusion dans le xr-frame Mini Program.
Chargez la ressource du modèle via
scene.assets.loadAsset()(un déchargement manuel est nécessaire).const sampleAssets = { occlusion1: { assetId: "occlusion1", type: "gltf", src: "url/occlusion1.glb", options: {} } } async loadAsset() { if (!scene) {console.error("Empty scene"); return;} try { await scene.assets.loadAsset(sampleAssets.occlusion1); } catch (err) { console.error(`Failed to load assets: ${err.message}`); } }À l'exécution, chargez le modèle dans le callback de chargement EMA et assignez le matériau occlusion
Utilisez
scene.createElement(xrFrameSystem.XRGLTF,options)dans le callback de chargement EMA pour créer le noeud modèle.Paramètres :
xrFrameSystem.XRGLTF: indique que le type d'élément créé est un modèle GLTF.options: éléments de configuration d'initialisation, correspondant aux propriétés du composant.
Propriétés clés dans le code :
"model": obligatoire, pointe vers l'ID de ressource chargé (asset-id)."scale": facultatif,assetInfo.scaleou "1 1 1".name: obligatoire, nom de l'annotation.
Attention
Veillez à distinguer les property Keys chaîne et non chaîne, et renseignez-les exactement comme dans l'exemple.
Montez le modèle sous le noeud d'annotation avec
xrNode.addChild(child).Pour garantir que le modèle GLTF ait le même rendu avec les loaders sur différentes plateformes, faites pivoter le modèle chargé de 180 degrés autour de l'axe Y sur place.
Enfin, utilisez
model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {m.setData({ neverCull: true, material: occlusionMaterial });}pour modifier le matériau du modèle GLTF.Note
Le chargement, l'enregistrement, le désenregistrement et le déchargement du matériau
easyar-occulusionsont contrôlés par AR Session.Utilisez le modèle à la position d'annotation comme occlusion :
if (...) { model = scene.createElement( xrFrameSystem.XRGLTF, { "model": assetInfo.assetId, "scale": assetInfo.scale ? assetInfo.scale : "1 1 1", name: emaName } ); /** * En raison des différences de comportement des chargeurs GLTF, pour que l’orientation du modèle dans xr-frame corresponde exactement au rendu de Unity, * il faut parfois faire pivoter le modèle chargé de 180 degrés autour de l’axe Y sur place */ let modelTransform = model.getComponent(xrFrameSystem.Transform); let currentRotation = modelTransform.quaternion.clone(); let targetRotation = currentRotation.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0)); modelTransform.quaternion.set(targetRotation); // Remarque : le matériau doit être modifié après Transform if (assetInfo.assetId == 'occlusion1') { // Obtenir le matériau d’occlusion fourni par le plugin Mega let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion"); // Modifier le matériau d’occlusion model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => { m.setData({ neverCull: true, material: occlusionMaterial }); }); } }Exécuter sur un appareil réel
Comparez avec le résultat d'exécution simulée dans Unity editor.