Table of Contents

Cara memuat konten 3D dalam skenario AR saat runtime di xr-frame

Artikel ini menjelaskan secara rinci mekanisme pemisahan pemuatan sumber daya dan pemasangan node di xr-frame, mencapai fleksibilitas pemasangan konten 3D di bawah node Block melalui skrip dinamis untuk mewujudkan AR.

Referensi resmi

Referensi resmi sudah memiliki penjelasan lengkap tentang cara memuat konten 3D saat runtime, artikel ini hanya menjelaskan secara singkat beberapa konten dan metode pemuatan yang umum digunakan dalam skenario AR.

Pemuatan sumber daya vs pemasangan node

Di xr-frame, menampilkan model 3D dibagi menjadi dua tahap:

  1. Pemuatan sumber daya: Mengunduh dan mengurai file model (seperti .glb) dari jaringan atau lokal ke memori. Saat ini model sudah siap, tetapi tidak terlihat di adegan.

  2. Pemasangan node: Membuat node di pohon adegan dan mengaitkan sumber daya yang sudah dimuat ke node tersebut. Saat ini model baru akan muncul di kanvas render.

Cara memuat konten 3D secara dinamis menggunakan kode

  1. Pemuatan sumber daya

    Memuat sumber daya secara manual dengan memanggil loadAsset melalui sistem manajemen sumber daya adegan xr-frame.

    Parameter type mengacu pada jenis sumber daya, assetId mengacu pada id sumber daya setelah dimuat, src mengacu pada url sumber daya, biasanya alamat server hosting sumber daya.

    Perlu mencatat assetId untuk pemasangan dan pelepasan sumber daya selanjutnya.

    try {
    await scene.assets.loadAsset({type: 'gltf', assetId: 'panda', src: 'url/EasyARPanda.glb'});
} catch (err) {
    console.error(`Failed to load assets: ${err.message}`);
}

  2. Pemasangan node

    Menggunakan element.addChild() untuk menempatkan model yang sudah dimuat di bawah ShadowRoot.

    const root = scene.getElementById("shadow-root");
let panda = scene.createElement(xrFrameSystem.XRGLTF,
    {
        "model": "panda",
        "anim-autoplay": ""
    }
);
root.addChild(panda);

    Elemen ShadowRoot adalah node root khusus di xr-frame untuk mencegah pembuatan dan penghapusan node dinamis, lihat selengkapnya di Node Shadow.

    Menggunakan metode createXRNodeFromNodeAnnotation yang disediakan oleh objek plugin dapat membuat node anak Block berdasarkan data EMA, memastikan konten 3D ditampilkan di posisi ruang yang benar.

    const nodeAnnotation = annotation as easyar.ema.v0_5.Node;
const xrNode: xrfs.XRNode = easyarPlugin.createXRNodeFromNodeAnnotation(nodeAnnotation, blockHolder);
let panda = scene.createElement(xrFrameSystem.XRGLTF,
    {
        "model": "panda",
        "anim-autoplay": ""
    }
);
xrNode.addChild(panda);

Cara memasang konten langsung di bawah Block tanpa menggunakan anotasi

Peringatan

Prasyarat menggunakan metode ini adalah Anda telah memverifikasi bahwa nilai LocalTransform dapat mencapai efek render yang diharapkan dalam sistem koordinat xr-frame.

Untuk kasus lain silakan gunakan fungsi anotasi editor Unity.

Dapatkan objek node block di pohon adegan melalui getBlockById(id), jika node block yang sesuai tidak ada, berarti lokalisasi Block ini belum berhasil (node akan dibuat otomatis saat pertama kali melokalisasi Block tersebut). Anda dapat membuat node Block dengan holdBlock(blockInfo, blockTransformInput), atau menilai keberhasilan lokalisasi Block di callback lokalisasi sebelum memasang konten.

Kiat

Di pohon adegan editor Unity pilih node Block catat ID yang ditampilkan di panel Inspector

BlockID di editor Unity

Anda juga dapat menemukan Block ID di halaman repositori lokalisasi cloud

BlockID di repositori lokalisasi

const blockID = "aaaa1234-bbbb-cccc-dddd-eeeeee123456"
if (!blockHolder.getBlockById(blockParent.id)) {
    // Tidak ada node Block, buat satu
    blockHolder.holdBlock({
        id: blockID
    })
}
let blockElement = blockHolder.getBlockById(blockParent.id).el;

Pasang node model di bawah Block yang ditentukan, gunakan position.setArray(), quaternion.set() dan scale.setArray() untuk mengubah LocalTransform node model.

export interface LocalTransform {
    /** @description Posisi */
    position: xrfs.Vector3;
    /** @description Rotasi */
    rotation: xrfs.Quaternion;
    /** @description Skala */
    scale: xrfs.Vector3;
}

// Asumsikan ada LocalTransform di bawah Block yang diketahui
const targetTransform: LocalTransform;

blockElement.addChild(modelNode);
let modelTransform = modelNode.getComponent(xrFrameSystem.Transform);
    modelTransform.position.setArray([
        targetTransform.position.x,
        targetTransform.position.y,
        targetTransform.position.z
    ]);
    let annoRotation = new xrFrameSystem.Quaternion().setValue(
        targetTransform.rotation.x,
        targetTransform.rotation.y,
        targetTransform.rotation.z,
        targetTransform.rotation.w
    );
    modelTransform.quaternion.set(annoRotation);
    modelTransform.scale.setArray([
        targetTransform.scale.x,
        targetTransform.scale.y,
        targetTransform.scale.z
    ]);

Jenis sumber daya yang didukung xr-frame

  • Texture tekstur dan gambar
  • CubeTexture tekstur kubus
  • VideoTexture tekstur video
  • EnvData lingkungan
  • GLTF model
  • Keyframe animasi frame
  • Atlas atlas

Metode pemuatan detail setiap sumber daya lihat dokumentasi resmi WeChat dan contoh resmi xr-frame

Catatan

Format GLTF yang didukung dan ekstensi referensi penjelasan penggunaan GLTF resmi xr-frame