Table of Contents

Come caricare contenuti 3D in scenari AR a runtime in xr-frame

Questo articolo descrive in dettaglio il meccanismo di separazione tra resource loading e node mounting in xr-frame. Tramite script dinamici, i contenuti 3D possono essere montati in modo flessibile sotto nodi Block per realizzare AR.

Materiali ufficiali

I materiali ufficiali spiegano già in modo sufficiente come caricare contenuti 3D a runtime. Questo articolo descrive brevemente solo alcuni contenuti e metodi di caricamento comuni negli scenari AR.

Resource loading vs node mounting

In xr-frame, visualizzare un modello 3D si divide in due fasi:

  1. Resource loading: download di file modello (come .glb) da rete o locale e parsing in memoria. A questo punto il modello è pronto, ma non visibile nella scene.

  2. Node mounting: creazione di un node nel scene tree e associazione della resource caricata a quel node. Solo allora il modello appare ufficialmente nel rendering canvas.

Come caricare dinamicamente contenuti 3D usando codice

  1. Resource loading

    Caricare manualmente resources chiamando loadAsset tramite il sistema di gestione resources della scene xr-frame.

    Il parametro type indica il tipo di resource, assetId indica l'id della resource dopo il caricamento, e src indica la url della resource, di solito l'indirizzo del resource hosting server.

    Registrare assetId per il successivo mounting e rilascio della resource.

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

  2. Node mounting

    Usare element.addChild() per posizionare il modello caricato sotto ShadowRoot.

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

    L'elemento ShadowRoot è il root node usato appositamente da xr-frame per impedire la creazione e rimozione dinamica di nodes. Per dettagli vedere Shadow node.

    Il metodo createXRNodeFromNodeAnnotation fornito dal plugin object può creare child nodes di Block in base ai dati EMA, assicurando che i contenuti 3D vengano mostrati nella corretta posizione spaziale.

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

Come montare contenuti direttamente sotto Block senza usare annotation

Avvertenza

Il prerequisito per usare questo metodo è aver verificato che il valore LocalTransform possa ottenere l'effetto di rendering previsto nel sistema di coordinate xr-frame.

Per altri casi, usare la funzione annotation dell'Unity Editor.

Ottenere il block node object nel scene tree tramite getBlockById(id). Se il block node corrispondente non esiste, significa che la localization di questo Block non è ancora riuscita (il node viene creato automaticamente alla prima localization riuscita del Block). È possibile usare holdBlock(blockInfo, blockTransformInput) per creare un node per questo Block, oppure verificare nel localization callback che la localization del Block sia riuscita prima di montare il contenuto.

Consiglio

Selezionare node Block nel scene tree di Unity Editor e registrare l'ID mostrato nel pannello Inspector

BlockID in Unity Editor

È possibile trovare Block ID anche nella pagina della cloud localization library

BlockID nella localization library

const blockID = "aaaa1234-bbbb-cccc-dddd-eeeeee123456"
if (!blockHolder.getBlockById(blockParent.id)) {
    // non esiste alcun nodo Block; creane uno
    blockHolder.holdBlock({
        id: blockID
    })
}
let blockElement = blockHolder.getBlockById(blockParent.id).el;

Montare il model node sotto il Block specificato e usare position.setArray(), quaternion.set() e scale.setArray() per modificare il LocalTransform del model node.

export interface LocalTransform {
    /** @description posizione */
    position: xrfs.Vector3;
    /** @description rotazione */
    rotation: xrfs.Quaternion;
    /** @description Scale */
    scale: xrfs.Vector3;
}

// supponi che esista un LocalTransform noto sotto Block
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
    ]);

Tipi di resource supportati da xr-frame

  • Texture, texture e immagini
  • CubeTexture, texture cubiche
  • VideoTexture, texture video
  • EnvData, environment
  • GLTF models
  • Keyframe, frame animation
  • Atlas

I metodi dettagliati di caricamento per ogni resource si trovano nella documentazione ufficiale WeChat e negli esempi ufficiali xr-frame

Nota

Per formati ed extensions GLTF supportati, fare riferimento alle istruzioni ufficiali xr-frame per l'uso di GLTF