Table of Contents

XRFame ミニプログラム実行時に AR シーン内の 3D コンテンツを変更する方法

この記事では、AR トラッキング下での表示/非表示戦略の制御、実行時の Transform 変換、および GLTF マテリアルの動的更新に関する実践ガイドを提供します。

開始する前に

実行時 Block の可視性制御戦略を設定する方法

BlockController コンポーネントの可視性制御戦略 visibleStrategy には、以下の3種類があります：

戦略 説明
VisibleWhileTracked デフォルト値。Block が正常に追跡されている場合のみ表示され、追跡が失われると非表示になります。
VisibleAfterFirstTracked Block が一度正常に追跡されると、その後追跡が失われても表示されたままになります。
None エンジンによる表示/非表示制御を行わず、開発者が独自に管理します。

BlockHolder が holdBlock() を呼び出し、ShadowRoot 下に Block ノードを作成した後、その可視性戦略を変更できます。

BlockID の調べ方については、アノテーションなしで直接コンテンツをマウントする を参照してください。

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

// 戦略を変更: 一度追跡されれば永久に表示
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

デフォルトの VisibleStrategy は VisibleWhileTracked です。つまり、Block が 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);

    この例では、プログラムは model の xrFrameSystem.Transform を取得し、その位置と回転角度を変更しています。

  • テクスチャを置換する

    テクスチャを置換する前に、テクスチャリソース自体を xr-frame シーンのリソース管理システムを使用して loadAsset を呼び出し、手動でロードする必要があります。

    その後、モデルの 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);
});

    この例では、プログラムはまずシーンのリソースマネージャーを使用して textureAsset をロードし、それを使用して GLTF モデルのテクスチャを置換しています。

  • 登録済みマテリアルを置換する

    登録済みマテリアルを置換するには、まず xr-frame シーンのリソース管理システムを使用して getAsset() を呼び出し、マテリアルリソースを取得する必要があります。

    その後、モデルの GLTF プロパティを取得し、その各 mesh に対して setData を呼び出して material プロパティをターゲットマテリアルに変更します。

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

    この例では、プログラムはまずシーンのリソースマネージャーを使用して EasyAR が登録したオクルージョンマテリアル easyar-occlusion を取得し、それを GLTF モデルのマテリアルとして設定しています。