Table of Contents

Cómo modificar contenido 3D en una escena AR durante runtime de XRFame mini program

Este artículo ofrece una guía práctica para el control de estrategia de visibilidad bajo AR tracking, cambios de Transform en runtime y actualización dinámica de materiales GLTF.

Antes de empezar

Cómo configurar la estrategia de control de visibilidad del Block en runtime

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

Estrategia Descripción
VisibleWhileTracked Valor predeterminado. Se muestra solo cuando el Block se rastrea correctamente, y se oculta cuando se pierde tracking.
VisibleAfterFirstTracked Mientras el Block haya sido rastreado correctamente una vez, seguirá mostrándose aunque después se pierda tracking.
None La visibilidad no la controla el motor; la mantiene el desarrollador.

Después de que BlockHolder llame a holdBlock() para crear un nodo Block bajo ShadowRoot, puede modificar su estrategia de visibilidad.

Para saber cómo encontrar el BlockID, consulte Montar contenido directamente sin usar anotaciones.

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

// cambia la estrategia a: mostrar permanentemente una vez que se haga tracking
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

La VisibleStrategy predeterminada es VisibleWhileTracked, es decir, el contenido del Block (incluidos los nodos hijos) se muestra si y solo si el Block está bajo tracking de MegaTracker.

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

  • Modificar el Transform de un objeto

    Para un Element en la escena, 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);
/** 拷贝原本的四元数 */
let originalQuaternion = modelTF.quaternion.clone();
/** 绕Y旋转 180 度 */
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 luego modifica la posición alineada y el ángulo de rotación.

  • Reemplazar texture

    Antes de reemplazar una texture, debe cargar manualmente el propio recurso de texture llamando a loadAsset mediante el sistema de gestión de recursos de la escena xr-frame.

    Después, obtenga la propiedad GLTF del modelo y llame 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 usa primero el gestor de recursos de la escena para cargar un textureAsset y luego lo usa para reemplazar la texture del modelo GLTF.

  • Reemplazar material registrado

    Para reemplazar un material registrado, primero use el sistema de gestión de recursos de la escena xr-frame para llamar a getAsset() y obtener el recurso de material.

    Después, obtenga la propiedad GLTF del modelo y llame a setData en cada mesh para cambiar la propiedad material al material objetivo.

    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 usa primero el gestor de recursos de la escena para cargar el material de occlusion easyar-occlusion registrado por EasyAR, y luego lo establece como material del modelo GLTF.