Table of Contents

Como modificar conteúdo 3D em uma cena AR durante o runtime do XRFame mini program

Este artigo fornece orientação prática sobre controle de estratégia de visibilidade sob AR tracking, alterações de Transform em runtime e atualização dinâmica de material GLTF.

Antes de começar

Como configurar a estratégia de controle de visibilidade do Block em runtime

A estratégia de controle de visibilidade visibleStrategy do componente BlockController tem três opções:

Estratégia Descrição
VisibleWhileTracked Valor padrão. Exibe apenas quando o Block é rastreado com sucesso, e oculta quando o tracking é perdido.
VisibleAfterFirstTracked Assim que o Block tiver sido rastreado com sucesso uma vez, ele continua exibido mesmo que o tracking seja perdido depois.
None A visibilidade não é controlada pelo engine e é mantida pelo desenvolvedor.

Depois que BlockHolder chama holdBlock() para criar um node Block sob ShadowRoot, você pode modificar sua estratégia de visibilidade.

Para saber como encontrar o BlockID, consulte Montar conteúdo diretamente sem usar anotações.

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

// altera a estrategia para: mostrar permanentemente apos o tracking
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

A VisibleStrategy padrão é VisibleWhileTracked, ou seja, o conteúdo do Block (incluindo child nodes) é exibido se e somente se o Block estiver sob tracking do MegaTracker.

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

  • Modificar o Transform de um objeto

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

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

    Neste exemplo, o programa obtém o xrFrameSystem.Transform de model e então modifica a posição alinhada e o ângulo de rotação.

  • Substituir texture

    Antes de substituir uma texture, é necessário carregar manualmente o próprio recurso de texture chamando loadAsset pelo sistema de gerenciamento de recursos da cena xr-frame.

    Depois, obtenha a propriedade GLTF do modelo e chame o método 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 primeiro usa o gerenciador de recursos da cena para carregar um textureAsset, e depois o usa para substituir a texture do modelo GLTF.

  • Substituir material registrado

    Para substituir um material registrado, primeiro use o sistema de gerenciamento de recursos da cena xr-frame para chamar getAsset() e obter o recurso material.

    Depois, obtenha a propriedade GLTF do modelo e chame setData em cada mesh para modificar a propriedade material para o material alvo.

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

    Neste exemplo, o programa primeiro usa o gerenciador de recursos da cena para carregar o material de occlusion easyar-occlusion registrado pelo EasyAR e depois o define como material do modelo GLTF.