Table of Contents

XRFame mini program runtime에서 AR scene의 3D 콘텐츠를 수정하는 방법

이 문서는 AR tracking 상태에서의 표시/숨김 전략 제어, runtime Transform 변경, GLTF material 동적 업데이트에 대한 실무 가이드를 제공합니다.

시작하기 전에

runtime Block의 visibility 제어 전략 구성 방법

BlockController 컴포넌트의 visibility 제어 전략 visibleStrategy에는 세 가지가 있습니다.

전략 설명
VisibleWhileTracked 기본값. Block이 성공적으로 tracking될 때만 표시하고, tracking을 잃으면 숨깁니다.
VisibleAfterFirstTracked Block이 한 번이라도 성공적으로 tracking되면 이후 tracking을 잃더라도 계속 표시합니다.
None engine이 표시/숨김을 제어하지 않으며, 개발자가 직접 유지합니다.

BlockHolder가 holdBlock()을 호출하여 ShadowRoot 아래에 Block node를 만든 후 visibility 전략을 수정할 수 있습니다.

BlockID를 확인하는 방법은 주석을 사용하지 않고 콘텐츠 직접 마운트를 참고하십시오.

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

// 전략을 변경: tracking되면 영구적으로 표시
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

기본 VisibleStrategy는 VisibleWhileTracked입니다. 즉 Block이 MegaTracker tracking 상태에 있을 때에만 그 콘텐츠(자식 node 포함)가 표시됩니다.

콘텐츠 편집 및 수정 방법

  • 객체의 Transform 수정

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

    이 예제에서 프로그램은 model의 xrFrameSystem.Transform을 얻은 다음 정렬 위치와 회전 각도를 수정합니다.

  • texture 교체

    texture를 교체하기 전에 xr-frame scene의 resource management system을 통해 loadAsset을 호출하여 texture resource 자체를 수동으로 로드해야 합니다.

    이후 모델의 GLTF 속성을 얻고, 각 mesh의 material에 대해 setTexture() 메서드를 호출합니다.

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

    이 예제에서 프로그램은 먼저 scene의 resource manager를 사용해 textureAsset을 로드한 다음, 이를 사용해 GLTF 모델의 texture를 교체합니다.

  • 등록된 material 교체

    등록된 material을 교체하려면 먼저 xr-frame scene의 resource management system을 사용해 getAsset()을 호출하여 material resource를 얻어야 합니다.

    이후 모델의 GLTF 속성을 얻고, 각 mesh에 대해 setData를 호출하여 material 속성을 target material로 수정합니다.

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

    이 예제에서 프로그램은 먼저 scene의 resource manager를 사용해 EasyAR가 등록한 occlusion material easyar-occlusion을 로드한 다음, 이를 GLTF 모델의 material로 설정합니다.