Table of Contents

XRFame mini program runtime で AR シーン内の 3D コンテンツを変更する方法

この記事では、AR tracking 下での表示/非表示戦略制御、runtime Transform 変換、および GLTF material の動的更新に関する実践ガイドを提供します。

開始前

runtime Block の visibility 制御戦略を設定する方法

BlockController コンポーネントの visibility 制御戦略 visibleStrategy には 3 種類あります。

戦略 説明
VisibleWhileTracked デフォルト値。Block が正常に tracking されている場合のみ表示し、tracking を失うと非表示にします。
VisibleAfterFirstTracked Block が一度でも正常に tracking されると、その後 tracking を失っても表示を維持します。
None engine は表示/非表示を制御せず、開発者が自分で管理します。

BlockHolder が holdBlock() を呼び出して ShadowRoot の下に Block ノードを作成した後、その 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 下にある場合に限り、その内容（子ノードを含む）が表示されます。

コンテンツの編集と変更方法

  • オブジェクトの Transform を変更する

    シーン内の Element については、対応する Component を取得するために getComponent() メソッドを呼び出してから変更する必要があります。

    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 シーンのリソース管理システムで loadAsset を呼び出し、texture リソース自体を手動で読み込む必要があります。

    その後、モデルの 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 モデルの texture を置き換えています。

  • 登録済み material を置き換える

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

    その後、モデルの GLTF プロパティを取得し、各 mesh に対して setData を呼び出して material プロパティをターゲット 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 モデルの material として設定しています。