Table of Contents

Как изменить 3D-контент в AR-сцене во время runtime XRFame mini program

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

Перед началом

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

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

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

После того как BlockHolder вызывает holdBlock() и создает узел Block под ShadowRoot, можно изменить его стратегию видимости.

Как найти BlockID, см. в разделе Прямое монтирование контента без аннотаций.

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

// измените стратегию: показывать постоянно после начала tracking
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

VisibleStrategy по умолчанию - VisibleWhileTracked, то есть содержимое Block (включая дочерние узлы) отображается тогда и только тогда, когда Block находится под tracking 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();
/** 绕Y旋转 180 度 */
let targetQuaternion = originalQuaternion.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
transform.quaternion.setValue(targetQuaternion);

    В этом примере программа получает xrFrameSystem.Transform у model, затем изменяет выровненную позицию и угол поворота.

  • Заменить texture

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

    Затем получите свойство GLTF модели и вызовите метод setTexture() у material каждого 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);
});

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

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

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

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

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

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