Integrare il SDK Avatar di VIVERSE

Wonderland Engine è la scelta migliore per creare esperienze web 3D altamente performanti che devono funzionare senza problemi in VR. È ottimizzato per le prestazioni WebXR e tempi di caricamento rapidi. Funziona bene sui browser mobili, inclusi iOS Safari e visori VR standalone.

Questa guida spiega come integrare i servizi della piattaforma VIVERSE utilizzando il Universal Platform SDK (UPSDK) di Wonderland Engine e il provider VIVERSE.

Link

• Documentazione VIVERSE
• VIVERSE Studio

Prerequisiti 

Inizia con un progetto nuovo o esistente di Wonderland Engine.

Crea un account VIVERSE su VIVERSE e crea un Mondo/App in VIVERSE Studio per ottenere un appId per pubblicare il tuo progetto.

Installa il nostro Universal Platform SDK (UPSDK) via npm insieme al provider VIVERSE.

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

Configurazione 

Registra il provider il prima possibile nel punto di ingresso del tuo file app.js:

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

const provider = new ViverseProvider({
    appId: APPLICATION_ID, // sostituisci con il tuo reale appId da VIVERSE Studio
    debug: false, // imposta a `true` per un utente/avatar di debug per i test.
});

user.registerProvider(provider);

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

Ottieni un appId creando un Mondo/Applicazione in VIVERSE Studio.

Caricare un Avatar 

Una volta che il provider è registrato, puoi richiedere il login e leggere l’oggetto utente restituito. L’uso tipico in un componente è simile a questo:

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


// All'interno di un componente:

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

user.requestLogin()
    .then((u) => {
        // Usa u.name e u.avatarUrl nella tua app
        this.object.addComponent(Vrm, {
            src: u.avatarUrl,
        });
        console.log(`Avatar per ${u.name} caricato`);
    })
    .catch((err) => {
        console.error("Login fallito:", err);
    });

Plugin di Pubblicazione VIVERSE 

Il plugin di pubblicazione è opzionale. Wrappa l’SDK viverse-cli e aiuta a pubblicare il tuo progetto Wonderland Engine su VIVERSE direttamente dall’editor.

Installazione del Plugin 

Vai su Visualizza > Plugin e abilita l’esecuzione del plugin per il tuo progetto. Poi passa alla scheda “Ambito del Progetto” e fai clic su “Installa” accanto a @wonderlandengine/viverse-publish-plugin.

Infine, abilita il plugin.

Utilizzo (all’interno dell’Editor di Wonderland) 

1. Visualizza → Plugin → Plugin di Pubblicazione VIVERSE.
2. Inserisci il tuo nome utente e password VIVERSE e accedi tramite l’interfaccia del plugin.
3. Usa Crea Applicazione (che reindirizza a VIVERSE Studio) per creare un’applicazione e recuperare un ID dell’applicazione o Elenco App Log per ottenere gli appId esistenti nella console dell’editor.
4. Inserisci l’appId e clicca su Pubblica su VIVERSE per generare un pulsante URL Anteprima Aperta.
5. Clicca su Invia per revisione per aprire la pagina dell’applicazione VIVERSE Studio dove puoi inviare la tua app per la revisione. Da lì puoi anche ottenere un link di anteprima per ospiti da condividere.

Risoluzione dei Problemi 

• appId non trovato / non valido: assicurati di aver creato un’applicazione/mondo in VIVERSE Studio e di aver copiato il corretto ID.
• requestLogin() viene rifiutato: controlla i log di rete e i messaggi di debug del provider. Se debug: true funziona ma debug: false no, ricontrolla il tuo appId e la configurazione di VIVERSE Studio.
• Memoria elevata dalle texture avatar: ridimensiona le immagini e semplifica la mesh prima di caricare l’avatar.
• Il login del plugin dell’editor fallisce: assicurati che l’editor abbia accesso alla rete e che il tuo nome utente/password siano corretti. Controlla la console dell’editor per errori del plugin.

Se hai ancora problemi, contattaci tramite la nostra Comunità Discord, siamo felici di aiutarti!