WeChat Mini-Programm Mega-Plugin-Beispielprojektbeschreibung

Dieser Artikel erläutert detailliert die Verwendungsmethoden, Implementierungsweisen und zu beachtende Punkte der im Beispielprojekt demonstrierten Funktionen.

Bevor Sie beginnen

Sie müssen in der Lage sein, mit dem Unity-Editor Annotationen zu erstellen und hochzuladen und sich den Annotationsnamen und dessen ID zu notieren.
Sie müssen in der Lage sein, mit dem Unity-Editor 3D-Inhalte zu erstellen, die mit der realen Welt ausgerichtet sind.
Sie müssen in der Lage sein, das Beispielprojekt vollständig auszuführen.

Wie Sie ein Modell an einer Annotationsposition anzeigen

Im Unity-Editor genau platzieren und Annotationen hochladen, Annotationnamen und deren IDs aufzeichnen

GLTF-Model-Assets hinzufügen

Füge Model-Assets in sampleAssets in miniprogram/components/sample-easyar-mega/index.ts hinzu.

const sampleAssets = {
    your_model_name: {
        assetId: "your_model_asset_id",
        type: "gltf",
        src: "url/model.glb",
        options: {}
    }
}

Hinzugefügte Model-Assets laden

Lade das Modell in der Funktion loadAsset() in miniprogram/components/sample-easyar-mega/index.ts.

async loadAsset() {
    try {
        await scene.assets.loadAsset(sampleAssets.your_model_name);
    } catch (err) {
        console.error(`Failed to load assets: ${err.message}`);
    }
}

Zu ersetzende Annotationen konfigurieren

Konfiguriere die zu ersetzenden Annotationen in miniprogram/components/sample-data/annotation-metadata.ts. Trenne mehrere Annotationen durch Kommas.

export const AnnotationMetaData: Record<string, any> = {
    "aaaaaaaa-bbbb-cccc-dddd-123456789012": {
        assetId: "panda",
        scale: "0.5 0.5 0.5"
    },
    "aaaaaaaa-bbbb-cccc-dddd-123456789013": {
        assetId: "your_model_asset_id",
        scale: "1 1 1"
    }
};

Annotationen durch Modelle ersetzen

Verwende die "Fabrikmethode" scene.createElement(xrFrameSystem.XRGLTF, options) von xr-frame im EMA-Lade-Callback, um Modelknoten zu erstellen.

Parameter:
- xrFrameSystem.XRGLTF: Gibt den Elementtyp als GLTF-Modell an.
- options: Initialisierungskonfiguration, entspricht den Komponenteneigenschaften.
Wichtige Eigenschaften im Code:
- "model": Erforderlich, verweist auf die geladene Asset-ID (asset-id).
- "anim-autoplay": Optional, gibt den nach dem Laden automatisch abzuspielenden Animationnamen an.
- "scale": Optional, assetInfo.scale oder "1 1 1".
- name: Erforderlich, Annotationname.

Vorsicht

Achte auf die Unterscheidung zwischen String- und Nicht-String-Eigenschaftsschlüsseln. Halte dich genau an das Beispiel.

Hänge das Modell unter den Annotationknoten mit xrNode.addChild(child) an.

Um einheitliche Ergebnisse des GLTF-Modells unter verschiedenen Plattformladern zu gewährleisten, muss das geladene Modell nach dem Laden um 180 Grad um die Y-Achse gedreht werden.

if (assetInfo && assetInfo.assetId && assetInfo.assetId.trim().length > 0) {
    model = scene.createElement(
        xrFrameSystem.XRGLTF,
        {
            /** Entspricht der assetId aus dem vorherigen Schritt */
            "model": assetInfo.assetId,
            /** Kann hier die abzuspielende Modellanimation angeben */
            "anim-autoplay": assetInfo.animation ? assetInfo.animation : "",
            "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
            name: emaName
        }
    );
    xrNode.addChild(model);
    /**
     * Aufgrund unterschiedlichen Verhaltens von GLTF-Ladern muss das Modell nach dem Laden 
     * um 180 Grad um die Y-Achse gedreht werden, um die Ausrichtung im xr-frame 
     * exakt mit dem Unity-Rendering übereinstimmen zu lassen.
     */
    let modelTransform = model.getComponent(xrFrameSystem.Transform);
    let currentRotation = modelTransform.quaternion.clone();
    let targetRotation = currentRotation.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
    modelTransform.quaternion.set(targetRotation);
}

Auf dem Gerät ausführen
- Das Ergebnis auf dem Gerät sieht wie folgt aus und kann mit der Position aus Schritt 1 im Unity-Editor verglichen werden:
- Beim Aktivieren der linken "Transparentes Video"-Schaltfläche erscheint am Koordinatensystemursprung (Position (0, 0, 0)) ein Würfel mit transparentem Videomaterial.
  
  Anmerkung
  
  Der Ursprung kann sich an einer beliebigen zufälligen Position im Raum befinden. Annotationen können verwendet werden, um Okklusionsmodelle an gewünschten Positionen zu platzieren. Siehe Annotationen mit Unity-Editor erstellen und hochladen.
- Beim Aktivieren der linken "Occlusion"-Schaltfläche erscheinen am Koordinatensystemursprung (Position (0, 0, 0)) ein Panda-Modell und übereinander gestapelte Würfel. Der mittlere Würfel hat ein Okklusionsmaterial, auf der anderen Seite befindet sich ein statisches Panda-Modell mit Okklusionsmaterial.
  
  Anmerkung
  
  Der Ursprung kann sich an einer beliebigen zufälligen Position im Raum befinden. Annotationen können verwendet werden, um Okklusionsmodelle an gewünschten Positionen zu platzieren. Siehe Annotationen mit Unity-Editor erstellen und hochladen.

Wie Sie ein transparentes Video an einer Annotationsposition abspielen

Lade typ video-texture video-asset.

async loadAsset() {
    const videoTexture = {
        assetId: "fireball",
        type: "video-texture",
        // Video-Asset-URL  
        src: "url/video-resource.mp4",
        options: {
            autoPlay: true,
            loop: true,
        }
    };
    try {
        // Lade video-texture-Asset  
        await scene.assets.loadAsset(videoTexture);
    } catch (err) {
        console.error(`Failed to load video texture: ${err.message}`);
    }
}

Ändere EMA-lade-callback

Verwende scene.createElement(xrFrameSystem.XRMesh,options) im EMA-lade-callback, um eine einfache geometrische Grundform mit dem Material easyar-video-tsbs zu erstellen, und ändere das uniform in u_baseColorMap:video-{$assetId}.
- Parameter:
  - xrFrameSystem.XRMesh: Gibt an, dass ein Element des Typs grundlegende geometrische Form erstellt wird.
  - options: Initialisierungskonfiguration, entsprechend den Attributen der Komponente.
- Schlüsselattribute im Code:
  - "geometry": "cube": Verwendet die integrierten Würfel-Geometriedaten von xr-frame.
  - "material": "easyar-video-tsbs": Gibt ein vordefiniertes Material an (der Name deutet auf ein spezielles Material für Video-Texturen hin).
  - "uniforms": "u_baseColorMap:video-{$assetId}":
  Vorsicht
  
  Achte auf die Unterscheidung zwischen String- und Nicht-String-Attributschlüsseln. Schreibe sie genau wie im Beispiel.
  
  Dies ist die dynamische Bindung von Materialparametern.
  
  Es ordnet die Video-Textur-Ressource video-{$assetId} der Basisfarbenkarte des Materials zu.
  
  Effekt: Erzeugt einen Würfel, auf dessen Oberfläche ein Video abgespielt wird.
```
model = scene.createElement(xrFrameSystem.XRMesh, {
    geometry: "cube",
    material: "easyar-video-tsbs",
    uniforms: "u_baseColorMap:video-fireball",
});
xrNode.addChild(model);
```
Anmerkung

Wenn bei der Verwendung von video-texture die Warnung wx.createVideoDecoder with type: 'wemedia' is deprecated in der Konsole erscheint, ignoriere sie.

Nach Rücksprache mit dem offiziellen WeChat-Team beeinflusst diese Warnung nicht die Funktionalität.
Testlauf auf echtem gerät

Wie Sie ein mit dem Raum ausgerichtetes Okklusionsmodell platzieren

Präzise Platzierung des verdeckenden Modells und Hochladen der Annotation.

Laden von GLTF als Verdeckung in der xr-frame Mini-App.

Laden von Modellressourcen über scene.assets.loadAsset() (manuelles Entladen erforderlich).

const sampleAssets = {
    occlusion1: {
        assetId: "occlusion1",
        type: "gltf",
        src: "url/occlusion1.glb",
        options: {}
    }
}
async loadAsset() {
    if (!scene) {console.error("Empty scene"); return;}
    try {
        await scene.assets.loadAsset(sampleAssets.occlusion1);
    } catch (err) {
        console.error(`Failed to load assets: ${err.message}`);
    }
}

Laden des Modells zur Laufzeit im EMA-Lade-Callback und Zuweisen des Verdeckungsmaterials

Erstellen des Modellknotens im EMA-Lade-Callback mit scene.createElement(xrFrameSystem.XRGLTF,options).
- Parameter:
  - xrFrameSystem.XRGLTF: Definiert den Elementtyp als GLTF-Modell.
  - options: Initialisierungskonfiguration, entspricht den Komponenteneigenschaften.
- Schlüsseleigenschaften im Code:
  - "model": Erforderlich, verweist auf die geladene Ressourcen-ID (asset-id).
  - "scale": Optional assetInfo.scale oder "1 1 1".
  - name: Erforderlich, Annotationsname.
[!ACHTUNG] Unterscheidung zwischen String- und Nicht-String-Eigenschaftsschlüsseln beachten, exakt wie im Beispiel.

Anhängen des Modells an den Annotationsknoten via xrNode.addChild(child).

Um konsistente Darstellung des GLTF-Modells über Plattformen hinweg zu gewährleisten, muss das geladene Modell nachträglich um 180 Grad um die Y-Achse gedreht werden.

Materialanpassung finalisieren mit model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {m.setData({ neverCull: true, material: occlusionMaterial });}.

[!HINWEIS] Laden, Registrierung, Deregistrierung und Entladen des easyar-occulusion-Materials wird durch die AR-Sitzung gesteuert.

Nutzung des Modells als Verdeckung an der annotierten Position:
```
if (...) {
    model = scene.createElement(
        xrFrameSystem.XRGLTF,
        {
            "model": assetInfo.assetId,
            "scale": assetInfo.scale ? assetInfo.scale : "1 1 1",
            name: emaName
        }
    );
    /**
    * Aufgrund abweichenden Verhaltens von GLTF-Ladern wird eine 180-Grad-Y-Rotation benötigt,
    * um die Ausrichtung zwischen xr-frame und Unity zu konsolidieren
    */
    let modelTransform = model.getComponent(xrFrameSystem.Transform);
    let currentRotation = modelTransform.quaternion.clone();
    let targetRotation = currentRotation.multiply(new xrFrameSystem.Quaternion().setValue(0, 1, 0, 0));
    modelTransform.quaternion.set(targetRotation);
    //Materialänderung NACH Transform-Anpassung durchführen
    if (assetInfo.assetId == 'occlusion1') {
        //Abrufen des Verdeckungsmaterials via mega-Plugin
        let occlusionMaterial = scene.assets.getAsset("material", "easyar-occlusion");
        //Verdeckungsmaterial anwenden
        model.getComponent(xrFrameSystem.GLTF).meshes.forEach((m: any) => {
            m.setData({ neverCull: true, material: occlusionMaterial });
        });
    }
}
```
Ausführung auf dem Zielgerät

Vergleich mit Simulationsergebnissen aus dem Unity-Editor möglich.

Table of Contents

WeChat Mini-Programm Mega-Plugin-Beispielprojektbeschreibung

Bevor Sie beginnen

Wie Sie ein Modell an einer Annotationsposition anzeigen

Vorsicht

Anmerkung

Anmerkung

Wie Sie ein transparentes Video an einer Annotationsposition abspielen

Vorsicht

Anmerkung

Wie Sie ein mit dem Raum ausgerichtetes Okklusionsmodell platzieren

Verwandte Themen