Table of Contents

Cara memodifikasi konten 3D dalam scene AR saat runtime XRFame mini program

Artikel ini menyediakan panduan praktik untuk kontrol strategi visibility dalam AR tracking, perubahan Transform saat runtime, dan pembaruan dinamis material GLTF.

Sebelum memulai

Cara mengonfigurasi strategi kontrol visibility Block saat runtime

Strategi kontrol visibility visibleStrategy dari komponen BlockController memiliki tiga opsi:

Strategi Deskripsi
VisibleWhileTracked Nilai default. Hanya ditampilkan saat Block berhasil dilacak, dan disembunyikan saat tracking hilang.
VisibleAfterFirstTracked Selama Block pernah berhasil dilacak satu kali, setelah itu tetap ditampilkan meskipun tracking hilang.
None Visibility tidak dikontrol oleh engine dan dikelola sendiri oleh developer.

Setelah BlockHolder memanggil holdBlock() untuk membuat node Block di bawah ShadowRoot, Anda dapat mengubah strategi visibility-nya.

Cara menemukan BlockID dapat merujuk ke Memasang konten langsung tanpa menggunakan anotasi.

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

// ubah strategi menjadi: tampilkan permanen setelah berhasil di-track
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

VisibleStrategy default adalah VisibleWhileTracked, yang berarti konten Block (termasuk child node) ditampilkan jika dan hanya jika Block sedang berada dalam tracking MegaTracker.

Metode editing dan modifikasi konten

  • Memodifikasi Transform objek

    Untuk Element dalam scene, Anda perlu memanggil metode getComponent() untuk mendapatkan Component yang sesuai sebelum dapat memodifikasinya.

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

    Dalam contoh ini, program mendapatkan xrFrameSystem.Transform dari model, lalu memodifikasi posisi dan sudut rotasi yang disejajarkan.

  • Mengganti texture

    Sebelum mengganti texture, resource texture itu sendiri perlu dimuat secara manual dengan memanggil loadAsset melalui sistem manajemen resource scene xr-frame.

    Setelah itu, dapatkan properti GLTF model, lalu panggil metode setTexture() pada material dari setiap 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);
});

    Dalam contoh ini, program terlebih dahulu menggunakan resource manager scene untuk memuat sebuah textureAsset, lalu menggunakannya untuk mengganti texture model GLTF.

  • Mengganti material terdaftar

    Untuk mengganti material terdaftar, pertama gunakan sistem manajemen resource scene xr-frame untuk memanggil getAsset() dan mendapatkan resource material.

    Setelah itu, dapatkan properti GLTF model, lalu panggil setData pada setiap mesh untuk mengubah properti material menjadi material target.

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

    Dalam contoh ini, program terlebih dahulu menggunakan resource manager scene untuk memuat material occlusion easyar-occlusion yang didaftarkan EasyAR, lalu mengaturnya sebagai material model GLTF.