Table of Contents

Come modificare contenuti 3D in una scena AR durante il runtime di XRFame mini program

Questo articolo fornisce una guida pratica per il controllo della strategia di visibilità sotto AR tracking, le modifiche Transform a runtime e l'aggiornamento dinamico dei materiali GLTF.

Prima di iniziare

Come configurare la strategia di controllo della visibilità del runtime Block

La strategia di controllo della visibilità visibleStrategy del componente BlockController ha tre opzioni:

Strategia Descrizione
VisibleWhileTracked Valore predefinito. Mostra solo quando il Block viene tracciato con successo, e nasconde quando il tracking viene perso.
VisibleAfterFirstTracked Dopo che il Block è stato tracciato con successo una volta, rimane visualizzato anche se il tracking viene successivamente perso.
None La visibilità non è controllata dall'engine ed è gestita dallo sviluppatore.

Dopo che BlockHolder chiama holdBlock() per creare un nodo Block sotto ShadowRoot, è possibile modificarne la strategia di visibilità.

Per sapere come trovare BlockID, fare riferimento a Montare contenuto direttamente senza usare annotazioni.

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

// modifica la strategia in: mostra permanentemente dopo il tracking
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

La VisibleStrategy predefinita è VisibleWhileTracked, cioè il contenuto del Block (inclusi i child nodes) viene visualizzato se e solo se il Block è sotto tracking di MegaTracker.

Metodi di editing e modifica del contenuto

  • Modificare il Transform di un oggetto

    Per un Element nella scena, è necessario chiamare il suo metodo getComponent() per ottenere il Component corrispondente prima di poterlo modificare.

    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);

    In questo esempio, il programma ottiene xrFrameSystem.Transform di model, quindi modifica posizione allineata e angolo di rotazione.

  • Sostituire texture

    Prima di sostituire una texture, è necessario caricare manualmente la risorsa texture stessa chiamando loadAsset tramite il sistema di gestione risorse della scena xr-frame.

    Quindi ottenere la proprietà GLTF del modello e chiamare setTexture() sul material di ogni 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);
});

    In questo esempio, il programma usa prima il resource manager della scena per caricare un textureAsset, quindi lo usa per sostituire la texture del modello GLTF.

  • Sostituire materiale registrato

    Per sostituire un materiale registrato, usare prima il sistema di gestione risorse della scena xr-frame per chiamare getAsset() e ottenere la risorsa material.

    Quindi ottenere la proprietà GLTF del modello e chiamare setData su ogni mesh per modificare la proprietà material nel materiale target.

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

    In questo esempio, il programma usa prima il resource manager della scena per caricare il materiale di occlusion easyar-occlusion registrato da EasyAR, quindi lo imposta come materiale del modello GLTF.