Come configurare la visibilità dei blocchi in fase di esecuzione con XRFame

Questo articolo fornisce una guida pratica per il controllo delle strategie di visibilità, la trasformazione in tempo reale e l'aggiornamento dinamico dei materiali GLTF con tracciamento AR.

Prima di iniziare

• Familiarizzare con caricamento dei contenuti 3D in fase di esecuzione di xr-frame

Come configurare la strategia di controllo della visibilità dei blocchi in fase di esecuzione

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

Strategia	Descrizione
VisibleWhileTracked	Valore predefinito. Visualizzato solo quando il blocco è tracciato con successo, nascosto se il tracciamento viene perso.
VisibleAfterFirstTracked	Visualizzato permanentemente dopo il primo tracciamento riuscito, anche se successivamente perso.
None	Controllo manuale dello sviluppatore, non gestito dal motore.

Dopo la creazione del nodo Block in ShadowRoot tramite holdBlock() su BlockHolder, è possibile modificare la strategia di visibilità.

Per trovare il BlockID consultare mounting diretto dei contenuti senza annotazioni.

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

// Modifica la strategia: visualizzazione permanente dopo il primo tracciamento
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

La VisibleStrategy predefinita è VisibleWhileTracked: i contenuti (inclusi i nodi figli) sono visibili solo durante il tracciamento attivo da parte di MegaTracker.

Metodi di modifica e editing dei contenuti

• Modificare la trasformazione degli oggetti

  Per gli Element nella scena, utilizzare getComponent() per ottenere il Component corrispondente.

  const xrFrameSystem = wx.getXrFrameSystem();
  let transform = model.getComponent(xrFrameSystem.Transform);
  transform.position.setValue(1.0, 0.0, -1.0);
  /** Copia il quaternione originale */
  let originalQuaternion = modelTF.quaternion.clone();
  /** Rotazione di 180 gradi sull'asse Y */
  let targetQuaternion = originalQuaternion.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
  transform.quaternion.setValue(targetQuaternion);
  

  Questo esempio modifica la posizione e la rotazione ottenendo il xrFrameSystem.Transform del modello.

• Sostituire le texture

  Prima di sostituire una texture, caricare la risorsa tramite il sistema di gestione delle risorse di xr-frame con loadAsset.

  Ottenere poi 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);
  });
  

  Questo esempio carica una texture e la applica al modello GLTF.

• Sostituire i materiali registrati

  Ottenere prima la risorsa del materiale con getAsset().

  Modificare quindi la proprietà material di ogni mesh tramite setData.

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

  Questo esempio applica il materiale di occlusione registrato di EasyAR al modello GLTF.