Avatar Creator Integration

Integrate the Ready Player Me Avatar Creator in your React application.

In the Quickstart guide, you were introduced to the process of integrating the AvatarCreatorViewer component. This aims to get started quickly on the entire flow of creating and loading an avatar.

In case you want to visualize your avatar separately from the creator, you can use AvatarCreator component to receive configured Avatar URL and load it with your custom visualization layer.

Import and show the AvatarCreator

Once the package is installed (see Quickstart), you can import the AvatarCreator component and bring it to your React project. You will be expected to pass your subdomain as a parameter to the component.

import { AvatarCreator } from '@readyplayerme/rpm-react-sdk';

export default function App() {
  return (
    <div>
      <AvatarCreator subdomain="your_subdomain"/>
    </div>
  );
}

Configure the AvatarCreator

When you use Ready Player Me in an iframe, you can use certain URL parameters to customize it to fit your use case. AvatarCreator component can take an editorConfig parameter which helps you with this.

parameter	type	effect
language	string	Sets the default language of the creator.
bodyType	"halfbody" | "fullbody"	Instead of select page, starts with given option.
quickStart	boolean	Start with a quick start avatar selection.
clearCache	boolean	If disabled previous avatar will not be loaded.

const config: EditorConfig  = {
  clearCache: true;
  bodyType: 'halfbody';
  quickStart: 'false';
  language: 'pl';
};

<AvatarCreator subdomain="demo" editorConfig={config} />

Configure the avatar output (Optimize for quality / speed)

The AvatarCreator returns a URL to an avatar .glb file. A sample URL looks like that:

https://models.readyplayer.me/6185a4acfb622cf1cdc49348.glb

With the Avatar API, it is possible to pass various parameters to this URL to request a better-optimized, but lower-quality avatar - which could result in an avatar URL like this with a meshLod=2

https://models.readyplayer.me/6185a4acfb622cf1cdc49348.glb?meshLod=2

To achieve this within your project, you can now pass an avatar config to the AvatarCreator component, which adds necessary parameters to the exported avatar URL to help you download or import with a set of optimization options. You can read more about these options here.

parameter	type	effect
quality	"low" | "medium" | "high"	Quality presets.
meshLod	0 | 1 | 2	Changes mesh detail.
textureSizeLimit	number	Maximum size for each texture.
textureAtlas	"none" | 256 | 512 | 1024	Size of atlased texture.
textureChannels	array	Texture channels to load.
morphTargets	array	Morph targets to load.
pose	"A" | "T"	Avatar pose.
useHands	boolean	Use halfbody avatar hands.
useDracoCompression	boolean	Use Draco compression.
useMeshOptCompression	boolean	Use Mesh Opt compression.

const avatarConfig: AvatarConfig = {
  meshLod: 2,
  textureAtlas: 512,
  morphTargets: 'ARKit',
  pose: 'T',
};
    
<AvatarCreator subdomain="demo" avatarConfig={avatarConfig} />

Receive the results from AvatarCreator

You can pass AvatarCreator callbacks to receive exported avatar's URL and the user's ID.

const handleOnUserSet = (userId: string) => {
  console.log(`User ID is: ${userId}`)
};

const handleOnAvatarExported = (url;: string) => {
  console.log(`Avatar URL is: ${url}`)
};

<AvatarCreator subdomain="demo" onUserSet={handleOnUserSet} onAvatarExported={handleOnAvatarExported} />