集成VIVERSE Avatar SDK

Wonderland Engine是构建高性能3D网页和WebXR游戏的绝佳选择，因为它经过优化可以快速加载，甚至在iOS Safari上也能良好运行。本教程涵盖如何集成VIVERSE SDK服务。

Wonderland Engine × VIVERSE 集成横幅

Wonderland Engine是构建需要在VR中流畅运行的高性能3D网页体验的最佳选择。它针对WebXR性能和快速加载时间进行了优化。在包括iOS Safari的移动浏览器和独立VR头显上运行速度快。

本指南介绍如何使用Wonderland Engine的Universal Platform SDK (UPSDK)和VIVERSE提供商集成VIVERSE平台服务。

链接

前提条件 

从一个新的或现有的Wonderland Engine项目开始。

在VIVERSE上创建一个VIVERSE账户，并在VIVERSE Studio中创建一个World/App，以获取用于发布项目的appId。

通过npm安装我们的Universal Platform SDK (UPSDK)以及VIVERSE提供商。

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

设置 

尽早在应用程序的app.js入口中注册提供商：

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

const provider = new ViverseProvider({
    appId: APPLICATION_ID, // 用你在VIVERSE Studio中真实获取的appId替换
    debug: false, // 设置为`true`可以使用调试用户/头像进行测试。
});

user.registerProvider(provider);

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

通过在VIVERSE Studio中创建一个World/Application获取appId。

加载头像 

一旦提供商注册后，你可以请求登录并读取返回的用户对象。在组件中的典型用法如下：

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


// 在组件内部：

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

user.requestLogin()
    .then((u) => {
        // 在你的应用中使用u.name和u.avatarUrl
        this.object.addComponent(Vrm, {
            src: u.avatarUrl,
        });
        console.log(`加载了${u.name}的头像`);
    })
    .catch((err) => {
        console.error("登录失败:", err);
    });

VIVERSE 发布插件 

发布插件是可选项。它封装了viverse-cli SDK，帮助你直接从编辑器内将Wonderland Engine项目发布到VIVERSE。

插件安装 

前往视图 > 插件并为你的项目启用插件执行。然后切换到”项目范围”选项卡，点击@wonderlandengine/viverse-publish-plugin旁的”安装”。

最后，启用插件。

使用方法（在Wonderland Editor内） 

  1. 查看 → 插件 → VIVERSE发布插件。
  2. 在插件界面输入你的VIVERSE用户名和密码并登录。
  3. 使用创建应用程序（这会重定向到VIVERSE Studio）来创建一个应用并获取应用ID，或使用Log App List在编辑器控制台中获取现有appId。
  4. 输入appId并点击发布到viverse以生成一个打开预览URL按钮。
  5. 点击提交审查以打开VIVERSE Studio的应用页面，在那里可以提交你的应用进行审查。从那里你还可以获得一个访客预览链接以分享。

故障排除 

  • appId未找到/无效：确保你在VIVERSE Studio中已创建应用/世界，并复制了正确的ID。
  • requestLogin()被拒绝：检查网络日志和提供商调试消息。如果debug: true有效而debug: false无效，请仔细检查你的appId和VIVERSE Studio配置。
  • 头像纹理高内存：在加载头像之前，调整图像大小并简化网格。
  • 编辑器插件登录失败：确保编辑器有网络访问权限并且你的用户名/密码正确。检查编辑器控制台以查看插件错误。

如果你仍然遇到问题，请通过我们的Discord社区联系我们，我们很乐意帮忙！

Integrate the CrazyGames SDK Introduction to Texture Atlasses