Table of Contents

Cómo modificar contenido 3D en escenas AR durante el tiempo de ejecución de la miniaplicación XRFame

Este documento proporciona una guía práctica para controlar estrategias de visibilidad en seguimiento AR, transformaciones de Transform en tiempo de ejecución y actualización dinámica de materiales GLTF.

Antes de comenzar

Cómo configurar estrategias de control de visibilidad para bloques en tiempo de ejecución

La estrategia de control de visibilidad del componente BlockController visibleStrategy tiene tres tipos:

Estrategia Descripción
VisibleWhileTracked Valor predeterminado. Visible solo cuando el bloque es seguido con éxito, oculto cuando se pierde el seguimiento.
VisibleAfterFirstTracked Visible permanentemente después de un seguimiento exitoso, incluso si se pierde el seguimiento posteriormente.
None La visibilidad no es controlada por el motor, debe ser mantenida por el desarrollador.

Puedes modificar su estrategia de visibilidad después de que BlockHolder llame a holdBlock() para crear nodos de bloque bajo ShadowRoot.

Cómo encontrar BlockID puede consultarse en montar contenido sin anotaciones.

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

// Cambiar estrategia a: visible permanentemente después del primer seguimiento
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

La VisibleStrategy predeterminada es VisibleWhileTracked, lo que significa que el contenido (incluidos los nodos secundarios) solo se muestra cuando el bloque está bajo seguimiento de MegaTracker.

Métodos de edición y modificación de contenido

  • Modificar transform de objetos

    Para Element en la escena, se debe llamar a su método getComponent() para obtener el Component correspondiente antes de modificarlo.

    const xrFrameSystem = wx.getXrFrameSystem();
let transform = model.getComponent(xrFrameSystem.Transform);
transform.position.setValue(1.0, 0.0, -1.0);
/** Copiar el cuaternión original */
let originalQuaternion = modelTF.quaternion.clone();
/** Rotar 180 grados alrededor del eje Y */
let targetQuaternion = originalQuaternion.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
transform.quaternion.setValue(targetQuaternion);

    En este ejemplo, el programa obtiene el xrFrameSystem.Transform de model y modifica su posición y rotación.

  • Reemplazar textura

    Antes de reemplazar una textura, se debe cargar manualmente el recurso mediante el sistema de activos de la escena xr-frame usando loadAsset.

    Luego, obtén la propiedad GLTF del modelo y llama al método setTexture() en el 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);
});

    En este ejemplo, el programa carga primero un textureAsset usando el administrador de activos de la escena, luego lo usa para reemplazar la textura del modelo GLTF.

  • Reemplazar material registrado

    Para reemplazar un material registrado, primero usa el sistema de activos de la escena xr-frame llamando a getAsset() para obtener el recurso de material.

    Luego, obtén la propiedad GLTF del modelo y modifica la propiedad material de cada mesh usando setData.

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

    En este ejemplo, el programa carga el material de oclusión easyar-occlusion registrado por EasyAR usando el administrador de activos de la escena, luego lo establece como material del modelo GLTF.