Table of Contents

Bagaimana memodifikasi konten 3D dalam skenario AR saat runtime di XRFame mini-program

Artikel ini memberikan panduan praktis untuk kontrol strategi visibilitas dalam pelacakan AR, transformasi Transform saat runtime, dan pembaruan dinamis material GLTF.

Sebelum memulai

Bagaimana mengkonfigurasi strategi kontrol visibilitas runtime block

Strategi kontrol visibilitas komponen BlockController visibleStrategy memiliki tiga jenis:

Strategi Penjelasan
VisibleWhileTracked Nilai default. Hanya ditampilkan saat Block berhasil dilacak, tersembunyi jika kehilangan pelacakan.
VisibleAfterFirstTracked Tetap ditampilkan meskipun kehilangan pelacakan, asalkan Block pernah berhasil dilacak sekali.
None Visibilitas tidak dikendalikan oleh mesin, dikelola secara mandiri oleh pengembang.

Strategi visibilitas dapat dimodifikasi setelah BlockHolder memanggil holdBlock() untuk membuat node Block di bawah ShadowRoot.

Cara menemukan BlockID dapat merujuk ke memasang konten tanpa ema.

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

// Ubah strategi menjadi: ditampilkan permanen setelah pertama kali dilacak
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

Strategi Visibilitas default adalah VisibleWhileTracked, artinya konten (termasuk node anak) hanya ditampilkan saat Block berada dalam pelacakan MegaTracker.

Metode pengeditan dan modifikasi konten

  • Memodifikasi Transform objek

    Untuk Element dalam skenario, perlu memanggil metode getComponent() untuk mendapatkan Component yang sesuai sebelum dimodifikasi.

    const xrFrameSystem = wx.getXrFrameSystem();
let transform = model.getComponent(xrFrameSystem.Transform);
transform.position.setValue(1.0, 0.0, -1.0);
/** Menyalin quaternion asli */
let originalQuaternion = modelTF.quaternion.clone();
/** Memutar 180 derajat mengelilingi sumbu Y */
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 rotasinya.

  • Mengganti tekstur

    Sebelum mengganti tekstur, aset tekstur itu sendiri harus dimuat secara manual menggunakan sistem manajemen aset adegan xr-frame dengan memanggil loadAsset.

    Kemudian dapatkan properti GLTF model, dan panggil metode setTexture() pada material 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 pertama memuat textureAsset menggunakan manajer aset adegan, lalu menggunakannya untuk mengganti tekstur model GLTF.

  • Mengganti material terdaftar

    Mengganti material terdaftar memerlukan pengambilan aset material terlebih dahulu menggunakan sistem manajemen aset adegan xr-frame dengan memanggil getAsset().

    Kemudian dapatkan properti GLTF model, dan modifikasi properti material setiap mesh ke material target menggunakan setData.

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

    Dalam contoh ini, program memuat material oklusi EasyAR easyar-occlusion menggunakan manajer aset adegan, lalu menetapkannya sebagai material model GLTF.