Change Avatars Programatically

Control how users see and express themselves with the .changeAvatar() method on LocalPlayer

If you don't want to use default VIVERSE avatars for your world, the PlayCanvas SDK features a simple method to swap to any .vrm avatar asset in your project.

Per the API docs, import the PlayerService into your .mjs script, which has a localPlayer property of type LocalPlayer, which in turn has a .changeAvatar() method.

import { Script, Asset } from "playcanvas";
import { PlayerService } from "../@viverse/create-sdk.mjs";

export class VvSwitchAvatars extends Script {
  static scriptName = "vvSwitchAvatars";

  /**
   * @attribute
   * @type {Asset}
   */
  vrmAsset = null;

  initialize() {
    this.playerService = new PlayerService();
    this.playerService.localPlayer.changeAvatar(this.vrmAsset);
  }
}

NOTE: this script asset must be placed in /scripts or another subfolder, since it assumes the VIVERSE SDK is one level up, located at: "../@viverse/create-sdk.mjs" - or you can alter this import path as needed. For more information on how .mjs scripts and imports work, see Introduction to MJS.

Because vrmAsset is defined as an attribute of type Asset, we can then select which asset to use directly in the PlayCanvas editor once the script is added to an entity.

When we publish to VIVERSE and load the experience, the .vrm is loaded immediately. Avatar switching for the local player is possible at any point during runtime and can be triggered with UI, trigger colliders, or with any other programmatic callback. Reference Code: PlayCanvas minimal reproduction project Live demo