Table of Contents

Wie man 3D-inhalte in AR-szenen zur laufzeit von XRFame mini-programmen ändert

Dieser Artikel bietet praktische Anleitungen zur Steuerung der Sichtbarkeitsstrategie unter AR-Tracking, zur Laufzeit-Transform-Änderung und zur dynamischen Aktualisierung von GLTF-Materialien.

Bevor Sie beginnen

Wie man die sichtbarkeitssteuerungsstrategie für Laufzeit-blöcke konfiguriert

Die Sichtbarkeitssteuerungsstrategie visibleStrategy der BlockController-Komponente hat drei Modi:

Strategie Beschreibung
VisibleWhileTracked Standardwert. Nur anzeigen, wenn der Block erfolgreich verfolgt wird; bei Verlust der Verfolgung ausblenden.
VisibleAfterFirstTracked Einmalig anzeigen, nachdem der Block erfolgreich verfolgt wurde, bleibt sichtbar auch bei späterem Tracking-Verlust.
None Sichtbarkeit wird nicht von der Engine gesteuert, muss vom Entwickler verwaltet werden.

Nachdem BlockHolder durch Aufruf von holdBlock() einen Blockknoten unter ShadowRoot erstellt hat, kann dessen Sichtbarkeitsstrategie geändert werden.

Wie man die BlockID findet, wird unter Inhalte ohne Annotation einbinden erklärt.

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

// Strategie ändern: Dauerhaft anzeigen nach erstem Tracking
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

Die Standard-VisibleStrategy ist VisibleWhileTracked, d.h. Blockinhalte (inklusive Kindknoten) werden nur angezeigt, wenn der Block von MegaTracker verfolgt wird.

Methoden zur inhaltsbearbeitung und -änderung

  • Transform von Objekten ändern

    Für Element in der Szene muss dessen getComponent()-Methode aufgerufen werden, um die entsprechende Component für Änderungen zu erhalten.

    const xrFrameSystem = wx.getXrFrameSystem();
let transform = model.getComponent(xrFrameSystem.Transform);
transform.position.setValue(1.0, 0.0, -1.0);
/** Ursprüngliches Quaternion kopieren */
let originalQuaternion = modelTF.quaternion.clone();
/** 180 Grad um Y rotieren */
let targetQuaternion = originalQuaternion.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
transform.quaternion.setValue(targetQuaternion);

    In diesem Beispiel holt das Programm die xrFrameSystem.Transform von model und ändert dessen Position und Rotation.

  • Texturen ersetzen

    Vor dem Texturaustausch muss die Texturressource selbst manuell über das Asset-System der xr-frame-Szene mittels loadAsset geladen werden.

    Anschließend die GLTF-Eigenschaft des Modells abrufen und für jedes mesh dessen material die setTexture()-Methode aufrufen.

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

    Hier lädt das Programm zunächst eine textureAsset und ersetzt damit die Textur des GLTF-Modells.

  • Registrierte materialien ersetzen

    Zum Austausch registrierter Materialien muss zunächst mit dem Asset-System der Szene getAsset() aufgerufen werden, um die Materialressource zu erhalten.

    Anschließend die GLTF-Eigenschaft des Modells abrufen und für jedes mesh die material-Eigenschaft per setData auf das Zielmaterial setzen.

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

    Dieses Beispiel lädt das von EasyAR registrierte Okklusionsmaterial easyar-occlusion und weist es dem GLTF-Modell zu.