Integration des VIVERSE Avatar SDK

Wonderland Engine ist eine hervorragende Wahl für die Entwicklung hochleistungsfähiger 3D-Web- und WebXR-Spiele, da sie für schnelles Laden optimiert ist und sogar auf iOS Safari gut läuft. Dieses Tutorial erklärt, wie man die VIVERSE SDK-Dienste integriert.

Wonderland Engine × VIVERSE Integration Banner

Wonderland Engine ist die beste Wahl für den Aufbau hochleistungsfähiger 3D-Web-Erlebnisse, die in VR flüssig laufen müssen. Sie ist für WebXR-Leistung und schnelle Ladezeiten optimiert. Sie läuft schnell auf mobilen Browsern, einschließlich iOS Safari, und eigenständigen VR-Headsets.

Diese Anleitung erklärt, wie man die Dienste der VIVERSE-Plattform mithilfe des Universal Platform SDK (UPSDK) von Wonderland Engine und dem VIVERSE provider integriert.

Links

Voraussetzungen

Starte mit einem neuen oder bestehenden Wonderland Engine-Projekt.

Erstelle ein VIVERSE-Konto auf VIVERSE und erstelle eine Welt/App im VIVERSE Studio, um eine appId für die Veröffentlichung deines Projekts zu erhalten.

Installiere unser Universal Platform SDK (UPSDK) über npm zusammen mit dem VIVERSE provider.

npm i --save @wonderlandengine/upsdk \
    @wonderlandengine/upsdk-provider-viverse

Einrichtung

Registriere den Anbieter so früh wie möglich im Einstiegspunkt Deiner Anwendung app.js:

import {user} from "@wonderlandengine/upsdk";
import {ViverseProvider} from "@wonderlandengine/upsdk-provider-viverse";

const provider = new ViverseProvider({
    appId: APPLICATION_ID, // ersetze mit deiner echten appId aus VIVERSE Studio
    debug: false, // auf `true` setzen, um einen Debug-Benutzer/Avatar für Tests zu verwenden.
});

user.registerProvider(provider);

/* wle:auto-constants:start */
// ...

Erhalte eine appId, indem Du eine Welt/Anwendung im VIVERSE Studio erstellst.

Einen Avatar laden

Sobald der Provider registriert ist, kannst Du die Anmeldung anfordern und das zurückgegebene Benutzerobjekt lesen. Typische Verwendung in einer Komponente sieht so aus:

import {user} from "@wonderlandengine/upsdk";
import {Vrm} from '@wonderlandengine/components';


// Innerhalb einer Komponente:

static onRegister(engine) {
    engine.registerComponent(Vrm);
}

user.requestLogin()
    .then((u) => {
        // Verwende u.name und u.avatarUrl in Deiner App
        this.object.addComponent(Vrm, {
            src: u.avatarUrl,
        });
        console.log(`Avatar für ${u.name} geladen`);
    })
    .catch((err) => {
        console.error("Anmeldung fehlgeschlagen:", err);
    });

VIVERSE Publish Plugin

Das Publish-Plugin ist optional. Es umschließt das viverse-cli SDK und hilft, dein Wonderland Engine-Projekt direkt aus dem Editor auf VIVERSE zu veröffentlichen.

Plugin-Installation

Gehe zu Views > Plugins und aktiviere die Plugin-Ausführung für dein Projekt. Wechsle dann zum “Project Scope”-Tab und klicke auf “Installieren” neben @wonderlandengine/viverse-publish-plugin.

Schließlich aktiviere das Plugin.

Verwendung (im Wonderland Editor)

Ansichten → Plugins → VIVERSE Publish Plugin.
Gebe Deinen VIVERSE-Benutzernamen & -Passwort ein und melde Dich über die Plugin-Oberfläche an.
Verwende Create Application (das zu VIVERSE Studio weiterleitet), um eine Anwendung zu erstellen und eine Anwendungs-ID abzurufen, oder Log App List, um vorhandene appIds in der Editor-Konsole zu erhalten.
Gebe die appId ein und klicke auf Publish to viverse, um einen Open Preview URL-Button zu generieren.
Klicke auf Submit to review, um die VIVERSE Studio-Anwendungsseite zu öffnen, auf der Du Deine App zur Prüfung einreichen kannst. Von dort kannst Du auch einen Gastvorschau-Link erhalten, um ihn zu teilen.

Fehlerbehebung

appId nicht gefunden / ungültig: Stelle sicher, dass Du eine Anwendung/Welt im VIVERSE Studio erstellt und die richtige ID kopiert hast.
requestLogin() wird abgelehnt: Überprüfe Netzwerkprotokolle und Provider-Debug-Meldungen. Wenn debug: true funktioniert, aber debug: false nicht, überprüfe Deine appId und die VIVERSE Studio-Konfiguration.
Hoher Speicherverbrauch durch Avatar-Texturen: Verkleinere Bilder und vereinfache das Mesh, bevor Du den Avatar lädst.
Editor-Plugin-Anmeldung fehlschlägt: Stelle sicher, dass der Editor Netzwerkzugriff hat und Dein Benutzername/Passwort korrekt ist. Überprüfe die Editor-Konsole auf Plugin-Fehler.

Wenn Du weiterhin Probleme hast, kontaktiere uns über unsere Discord Community, wir helfen Dir gerne weiter!