Table of Contents

3D-Inhalte in einer AR-Szene zur Laufzeit des XRFame mini program ändern

Dieser Artikel bietet praktische Anleitungen zur Steuerung der Sichtbarkeitsstrategie unter AR tracking, zu Transform-Änderungen zur runtime und zur dynamischen Aktualisierung von GLTF-Materialien.

Bevor Sie beginnen

Sichtbarkeitssteuerungsstrategie des runtime Block konfigurieren

Die Sichtbarkeitssteuerungsstrategie visibleStrategy der BlockController-Komponente hat drei Optionen:

Strategie Beschreibung
VisibleWhileTracked Standardwert. Wird nur angezeigt, wenn der Block erfolgreich getrackt wird, und bei Verlust des tracking ausgeblendet.
VisibleAfterFirstTracked Sobald der Block einmal erfolgreich getrackt wurde, bleibt er auch bei späterem Verlust des tracking sichtbar.
None Die Sichtbarkeit wird nicht von der Engine gesteuert, sondern vom Entwickler selbst verwaltet.

Nachdem BlockHolder holdBlock() aufgerufen und unter ShadowRoot einen Block-Knoten erstellt hat, kann dessen Sichtbarkeitsstrategie geändert werden.

Wie Sie die BlockID finden, erfahren Sie unter Inhalte direkt ohne Annotationen mounten.

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

// 修改策略为：一旦跟踪到就永久显示
block.visibleStrategy = BlockVisibleStrategy.VisibleAfterFirstTracked;

Die Standard-VisibleStrategy ist VisibleWhileTracked, das heißt, der Inhalt des Block (einschließlich seiner child nodes) wird genau dann angezeigt, wenn der Block durch MegaTracker getrackt wird.

Methoden zum Bearbeiten und Ändern von Inhalten

  • Transform eines Objekts ändern

    Für ein Element in der Szene muss seine Methode getComponent() aufgerufen werden, um die entsprechende Component zu erhalten, bevor sie geändert werden kann.

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

    In diesem Beispiel ruft das Programm xrFrameSystem.Transform von model ab und ändert dann die ausgerichtete Position und den Rotationswinkel.

  • Texture ersetzen

    Vor dem Ersetzen einer texture muss die texture-Ressource selbst manuell geladen werden, indem loadAsset über das Ressourcenverwaltungssystem der xr-frame-Szene aufgerufen wird.

    Danach wird die GLTF-Eigenschaft des Modells abgerufen und für das material jedes mesh die Methode setTexture() aufgerufen.

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

    In diesem Beispiel lädt das Programm zuerst mit dem Ressourcenmanager der Szene ein textureAsset und ersetzt damit die texture des GLTF-Modells.

  • Registriertes Material ersetzen

    Zum Ersetzen eines registrierten Materials muss zuerst über das Ressourcenverwaltungssystem der xr-frame-Szene getAsset() aufgerufen werden, um die Materialressource abzurufen.

    Danach wird die GLTF-Eigenschaft des Modells abgerufen und für jedes mesh setData aufgerufen, um die Eigenschaft material auf das Zielmaterial zu ändern.

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

    In diesem Beispiel lädt das Programm zuerst mit dem Ressourcenmanager der Szene das von EasyAR registrierte occlusion material easyar-occlusion und setzt es dann als Material des GLTF-Modells.