Table of Contents

Comment modifier le contenu 3D dans une scène AR lors de l'exécution d'une mini-programme XRFrame

Cet article fournit un guide pratique pour le contrôle des stratégies de visibilité sous suivi AR, la transformation des Transform lors de l'exécution et la mise à jour dynamique des matériaux GLTF.

Avant de commencer

Comment configurer la stratégie de contrôle de visibilité des blocs lors de l'exécution

La stratégie de contrôle de visibilité du composant BlockController visibleStrategy a trois options :

Stratégie Description
VisibleWhileTracked Valeur par défaut. Visible uniquement lorsque le bloc est suivi avec succès, caché en cas de perte de suivi.
VisibleAfterFirstTracked Reste visible après un suivi réussi, même en cas de perte de suivi ultérieure.
None La visibilité n'est pas contrôlée par le moteur, gérée par le développeur.

Modifiez la stratégie de visibilité après la création du nœud Block dans ShadowRoot via holdBlock() dans BlockHolder.

Pour trouver le BlockID, consultez montage de contenu sans EMA.

const blockInfo: easyar.BlockInfo = { id: blockId };
blockHolder.holdBlock(blockInfo);
const block = blockHolder.getBlockById(blockInfo.id);

// Modifier la stratégie : afficher en permanence après suivi
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

La stratégie VisibleStrategy par défaut est VisibleWhileTracked, ce qui signifie que le contenu (y compris les nœuds enfants) n'est visible que lorsque le bloc est suivi par MegaTracker.

Méthodes d'édition et de modification du contenu

  • Modifier le Transform d'un objet

    Pour un Element dans la scène, appelez sa méthode getComponent() pour obtenir le Component correspondant.

    const xrFrameSystem = wx.getXrFrameSystem();
let transform = model.getComponent(xrFrameSystem.Transform);
transform.position.setValue(1.0, 0.0, -1.0);
/** Copier le quaternion d'origine */
let originalQuaternion = modelTF.quaternion.clone();
/** Rotation de 180 degrés autour de Y */
let targetQuaternion = originalQuaternion.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
transform.quaternion.setValue(targetQuaternion);

    Dans cet exemple, le programme récupère le xrFrameSystem.Transform du model, puis modifie sa position et sa rotation.

  • Remplacer une texture

    Chargez manuellement la ressource de texture via le système de ressources de la scène xr-frame en utilisant loadAsset avant le remplacement.

    Ensuite, obtenez la propriété GLTF du modèle et appelez setTexture() sur le material de chaque mesh.

    const textureAsset = await scene.assets.loadAsset({
    type: 'texture',
    assetId: `texture01`,
    src: 'some-texture-url.png',
});
model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
    m.material.setTexture('u_baseColorMap', textureAsset.value);
});

    Dans cet exemple, le programme charge d'abord une textureAsset, puis remplace la texture du modèle GLTF.

  • Remplacer un matériau enregistré

    Obtenez la ressource matériau via le système de ressources de la scène en utilisant getAsset().

    Modifiez ensuite la propriété material de chaque mesh via setData dans la propriété GLTF du modèle.

    let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion");
model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
    m.setData({ material: occlusionMaterial });
});

    Dans cet exemple, le programme charge le matériau d'occlusion easyar-occlusion enregistré par EasyAR, puis le définit comme matériau du modèle GLTF.