Integra el SDK de Avatar de VIVERSE

Wonderland Engine es una excelente opción para crear juegos web en 3D de alto rendimiento y WebXR, porque está optimizado para cargar rápido e incluso funciona bien en iOS Safari. Este tutorial cubre cómo integrar los servicios del SDK de VIVERSE.

Banner de Integración de Wonderland Engine × VIVERSE

Wonderland Engine es la mejor opción para construir experiencias web en 3D altamente eficientes que necesitan funcionar sin problemas en VR. Está optimizado para el rendimiento de WebXR y tiempos de carga rápidos. Funciona rápido en navegadores móviles, incluyendo iOS Safari, y en auriculares VR autónomos.

Esta guía explica cómo integrar los servicios de la plataforma VIVERSE usando el Universal Platform SDK (UPSDK) de Wonderland Engine y el proveedor de VIVERSE.

Enlaces

Prerrequisitos 

Comienza con un nuevo proyecto de Wonderland Engine o uno existente.

Crea una cuenta de VIVERSE en VIVERSE y crea un Mundo/App en VIVERSE Studio para obtener un appId para publicar tu proyecto.

Instala nuestro Universal Platform SDK (UPSDK) a través de npm junto con el proveedor de VIVERSE.

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

Configuración 

Registra el proveedor tan pronto como sea posible en el punto de entrada app.js de tu aplicación:

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

const provider = new ViverseProvider({
    appId: APPLICATION_ID, // reemplaza con tu appId real de VIVERSE Studio
    debug: false, // ponlo en `true` para un usuario/avatar de depuración para pruebas.
});

user.registerProvider(provider);

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

Obtén un appId creando un Mundo/Aplicación en VIVERSE Studio.

Cargar un Avatar 

Una vez registrado el proveedor, puedes solicitar el inicio de sesión y leer el objeto de usuario devuelto. El uso típico en un componente es el siguiente:

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


// Dentro de un componente:

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

user.requestLogin()
    .then((u) => {
        // Usa u.name y u.avatarUrl en tu aplicación
        this.object.addComponent(Vrm, {
            src: u.avatarUrl,
        });
        console.log(`Avatar para ${u.name} cargado`);
    })
    .catch((err) => {
        console.error("Inicio de sesión fallido:", err);
    });

Plugin de Publicación de VIVERSE 

El plugin de publicación es opcional. Envuelve el SDK de viverse-cli y ayuda a publicar tu proyecto de Wonderland Engine en VIVERSE directamente desde el editor.

Instalación del Plugin 

Ve a Vistas > Plugins y habilita la ejecución del plugin para tu proyecto. Luego cambia a la pestaña “Alcance del Proyecto” y haz clic en “Instalar” al lado de @wonderlandengine/viverse-publish-plugin.

Por último, habilita el plugin.

Uso (dentro del Editor de Wonderland) 

  1. Vista → Plugins → Plugin de Publicación de VIVERSE.
  2. Introduce tu nombre de usuario y contraseña de VIVERSE e inicia sesión a través de la interfaz del plugin.
  3. Usa Crear Aplicación (que redirige a VIVERSE Studio) para crear una aplicación y recuperar un ID de aplicación o Registrar Lista de Apps para obtener appIds existentes en la consola del editor.
  4. Introduce el appId y haz clic en Publicar en viverse para generar un botón de URL de Vista Previa Abierta.
  5. Haz clic en Enviar para revisión para abrir la página de la aplicación en VIVERSE Studio donde puedes enviar tu app para revisión. Desde allí también puedes obtener un enlace de vista previa para compartir.

Solución de Problemas 

  • appId no encontrado / inválido: asegúrate de haber creado una aplicación/mundo en VIVERSE Studio y copiado el ID correcto.
  • requestLogin() rechaza: revisa los registros de red y los mensajes de depuración del proveedor. Si debug: true funciona pero debug: false no, verifica tu appId y la configuración de VIVERSE Studio.
  • Alta memoria por texturas de avatar: redimensionar las imágenes y simplificar la malla antes de cargar el avatar.
  • Fallos de inicio de sesión en el plugin del editor: asegúrate de que el editor tenga acceso a la red y que tu nombre de usuario/contraseña sean correctos. Comprueba la consola del editor para errores del plugin.

Si todavía tienes problemas, por favor contacta con nosotros a través de nuestra Comunidad de Discord, ¡estamos encantados de ayudarte!

Integrate the CrazyGames SDK Introduction to Texture Atlasses