Table of Contents

Comment modifier le contenu 3D d'une scène AR pendant le runtime de XRFame mini program

Cet article fournit un guide pratique pour le contrôle de stratégie de visibilité sous AR tracking, les transformations Transform au runtime et la mise à jour dynamique des matériaux GLTF.

Avant de commencer

Comment configurer la stratégie de contrôle de visibilité du Block au runtime

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

Stratégie Description
VisibleWhileTracked Valeur par défaut. S'affiche uniquement lorsque le Block est suivi avec succès, et se masque lorsque le tracking est perdu.
VisibleAfterFirstTracked Dès que le Block a été suivi avec succès une fois, il reste affiché même si le tracking est perdu ensuite.
None La visibilité n'est pas contrôlée par le moteur; elle est maintenue par le développeur.

Après que BlockHolder appelle holdBlock() pour créer un nœud Block sous ShadowRoot, vous pouvez modifier sa stratégie de visibilité.

Pour savoir comment trouver le BlockID, consultez Monter directement du contenu sans utiliser d'annotations.

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

// modifie la strategie : afficher de facon permanente des que le tracking est obtenu
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

La VisibleStrategy par défaut est VisibleWhileTracked, ce qui signifie que le contenu du Block (y compris les nœuds enfants) s'affiche si et seulement si le Block est sous tracking de MegaTracker.

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

  • Modifier le Transform d'un objet

    Pour un Element dans la scène, vous devez appeler sa méthode getComponent() afin d'obtenir le Component correspondant avant de pouvoir le modifier.

    const xrFrameSystem = wx.getXrFrameSystem();
let transform = model.getComponent(xrFrameSystem.Transform);
transform.position.setValue(1.0, 0.0, -1.0);
/** 拷贝原本的四元数 */
let originalQuaternion = modelTF.quaternion.clone();
/** 绕Y旋转 180 度 */
let targetQuaternion = originalQuaternion.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
transform.quaternion.setValue(targetQuaternion);

    Dans cet exemple, le programme obtient le xrFrameSystem.Transform de model, puis modifie la position alignée et l'angle de rotation.

  • Remplacer texture

    Avant de remplacer une texture, vous devez charger manuellement la ressource texture elle-même en appelant loadAsset via le système de gestion des ressources de la scène xr-frame.

    Ensuite, obtenez la propriété GLTF du modèle et appelez la méthode 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 utilise d'abord le gestionnaire de ressources de la scène pour charger un textureAsset, puis l'utilise pour remplacer la texture du modèle GLTF.

  • Remplacer un material enregistré

    Pour remplacer un material enregistré, utilisez d'abord le système de gestion des ressources de la scène xr-frame pour appeler getAsset() et obtenir la ressource material.

    Ensuite, obtenez la propriété GLTF du modèle et appelez setData sur chaque mesh afin de modifier la propriété material en material cible.

    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 utilise d'abord le gestionnaire de ressources de la scène pour charger le material d'occlusion easyar-occlusion enregistré par EasyAR, puis le définit comme material du modèle GLTF.