Como modificar conteúdo 3D em cena AR durante a execução do miniprograma XRFame

Este artigo fornece um guia prático para controle de estratégia de visibilidade durante rastreamento AR, transformação de Transform em tempo de execução e atualização dinâmica de materiais GLTF.

Antes de começar

• Familiarize-se com carregamento de conteúdo 3D em tempo de execução do xr-frame

Como configurar a estratégia de controle de visibilidade do Block em tempo de execução

A estratégia de controle de visibilidade do componente BlockController visibleStrategy possui três tipos:

Estratégia	Descrição
VisibleWhileTracked	Valor padrão. Exibe apenas quando o Block é rastreado com sucesso, ocultando quando o rastreamento é perdido.
VisibleAfterFirstTracked	Mantém o Block visível após o primeiro rastreamento bem-sucedido, mesmo se o rastreamento for perdido posteriormente.
None	Não controlado pelo motor, deve ser gerenciado pelo desenvolvedor.

Após criar o nó Block no ShadowRoot via holdBlock() no BlockHolder, sua estratégia de visibilidade pode ser modificada.

Consulte carregar conteúdo sem EMA para localizar BlockID.

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

// Altera estratégia para: exibir permanentemente após primeiro rastreamento
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

A VisibleStrategy padrão é VisibleWhileTracked, significando que o conteúdo (incluindo nós filhos) só é exibido quando o Block está sob rastreamento do MegaTracker.

Métodos de edição e modificação de conteúdo

• Modificar Transform de objetos

  Para Element na cena, é necessário chamar seu método getComponent() para obter o Component correspondente antes de modificar.

  const xrFrameSystem = wx.getXrFrameSystem();
  let transform = model.getComponent(xrFrameSystem.Transform);
  transform.position.setValue(1.0, 0.0, -1.0);
  /** Copia o quaternion original */
  let originalQuaternion = modelTF.quaternion.clone();
  /** Girar 180 graus no eixo Y */
  let targetQuaternion = originalQuaternion.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
  transform.quaternion.setValue(targetQuaternion);
  

  Neste exemplo, o programa obtém o xrFrameSystem.Transform do model e modifica sua posição e rotação.

• Substituir texturas

  Antes de substituir texturas, o recurso de textura deve ser carregado manualmente via sistema de assets da cena xr-frame usando loadAsset.

  Posteriormente, obtenha a propriedade GLTF do modelo e chame setTexture() no material de cada 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);
  });
  

  Neste exemplo, o programa carrega um textureAsset usando o gerenciador de recursos da cena e o aplica como textura do modelo GLTF.

• Substituir material registrado

  Para substituir material registrado, primeiro obtenha o recurso de material via sistema de assets da cena usando getAsset().

  Posteriormente, obtenha a propriedade GLTF do modelo e modifique o atributo material de cada mesh via setData.

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

  Neste exemplo, o programa obtém o material de oclusão easyar-occlusion registrado pelo EasyAR e o aplica ao modelo GLTF.