Table of Contents

Как изменить 3D-контент в среде AR во время выполнения мини-программы XRFame

В этой статье представлены практические рекомендации по управлению стратегией видимости при AR-отслеживании, трансформации Transform во время выполнения и динамическому обновлению материалов GLTF.

Перед началом работы

Как настроить стратегию управления видимостью блока во время выполнения

Компонент BlockController имеет три стратегии управления видимостью visibleStrategy:

Стратегия Описание
VisibleWhileTracked Значение по умолчанию. Отображается только при успешном отслеживании блока, скрывается при потере отслеживания.
VisibleAfterFirstTracked Отображается постоянно после первого успешного отслеживания блока, даже при потере отслеживания.
None Видимость не управляется движком, поддерживается разработчиком самостоятельно.

Стратегию видимости можно изменить после создания узла блока в ShadowRoot через вызов holdBlock() в BlockHolder.

Как найти BlockID описано в загрузке контента без маркировки EMA.

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

// Изменяем стратегию: отображать постоянно после первого отслеживания
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

Стратегия VisibleStrategy по умолчанию — VisibleWhileTracked, что означает отображение контента (включая дочерние узлы) только при отслеживании блока MegaTracker.

Методы редактирования и изменения контента

  • Изменение трансформа объекта (Transform)

    Для Element в сцене необходимо вызвать его метод getComponent(), чтобы получить соответствующий Component для внесения изменений.

    const xrFrameSystem = wx.getXrFrameSystem();
let transform = model.getComponent(xrFrameSystem.Transform);
transform.position.setValue(1.0, 0.0, -1.0);
/** Копируем исходный кватернион */
let originalQuaternion = modelTF.quaternion.clone();
/** Поворачиваем на 180 градусов вокруг оси Y */
let targetQuaternion = originalQuaternion.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
transform.quaternion.setValue(targetQuaternion);

    В этом примере программа получает xrFrameSystem.Transform модели model, затем изменяет её положение и угол поворота.

  • Замена текстуры

    Перед заменой текстуры необходимо вручную загрузить сам ресурс текстуры через систему управления ресурсами сцены xr-frame, вызвав loadAsset.

    Затем получаем свойство GLTF модели и для каждого mesh вызываем метод setTexture() у его material.

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

    В этом примере программа сначала загружает textureAsset через менеджер ресурсов сцены, затем заменяет им текстуру модели GLTF.

  • Замена зарегистрированного материала

    Для замены зарегистрированного материала сначала необходимо получить ресурс материала, вызвав getAsset() через систему управления ресурсами сцены xr-frame.

    Затем получаем свойство GLTF модели и для каждого mesh изменяем свойство material на целевой материал через вызов setData.

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

    В этом примере программа сначала загружает зарегистрированный в EasyAR материал окклюзии easyar-occlusion, затем устанавливает его как материал модели GLTF.