Quickstart
Load your personal Ready Player Me avatar in your React project in less than 5 minutes.
- Sign in to Studio (Developer Dashboard) and copy your subdomain. This will allow you to create and load an avatar in your domain at a later step.
Ready Player Me - React Avatar Creator is available as an npm package. Run the following command in the root of your React project.
npm i @readyplayerme/react-avatar-creator
AvatarCreator component can take an editorConfig parameter, which helps you with this. The component uses an iframe to render the underlying Avatar Creator, and passes these parameters in the URL.parameter | type | effect |
|---|---|---|
language | string | |
bodyType | "halfbody" | "fullbody" | Instead of select page, starts with given option. |
quickStart | boolean | |
clearCache | boolean | If disabled previous avatar will not be loaded. |
After installing the npm package into your project, you can import the
AvatarCreator Component and pass your subdomain as a parameter to load the Ready Player Me in your React project. You should also add an onAvatarExported callback to the component to receive the avatar's URL when exported.import { AvatarCreator, AvatarCreatorConfig, AvatarExportedEvent } from '@readyplayerme/react-avatar-creator';
const config: AvatarCreatorConfig = {
clearCache: true,
bodyType: 'fullbody',
quickStart: false,
language: 'en',
};
const style = { width: '100%', height: '100vh', border: 'none' };
export default function App() {
const handleOnAvatarExported = (event: AvatarExportedEvent) => {
console.log(`Avatar URL is: ${event.data.url}`);
};
return (
<>
<AvatarCreator subdomain="YOUR-SUBDOMAIN" config={config} style={style} onAvatarExported={handleOnAvatarExported} />
</>
);
}
Ready Player Me Visage package enables you to render your avatar in the browser. This package is available as an npm package. Run the following command at the root of your React project.
npm i @readyplayerme/visage
Make sure to install peer-dependencies if your project doesn't already include them:
npm install @react-three/[email protected] @react-three/[email protected] @react-three/[email protected] [email protected] [email protected] [email protected] [email protected]
Using the code snippet below, you can display your avatar.
import { AvatarCreator, AvatarCreatorConfig, AvatarExportedEvent } from '@readyplayerme/react-avatar-creator';
import { Avatar } from "@readyplayerme/visage";
import { useState } from "react";
const config: AvatarCreatorConfig = {
clearCache: true,
bodyType: 'fullbody',
quickStart: false,
language: 'en',
};
const style = { width: '100%', height: '100vh', border: 'none' };
export default function App() {
const [avatarUrl, setAvatarUrl] = useState('');
const handleOnAvatarExported = (event: AvatarExportedEvent) => {
setAvatarUrl(event.data.url);
};
return (
<>
<AvatarCreator subdomain="demo" config={config} style={style} onAvatarExported={handleOnAvatarExported} />
{avatarUrl && <Avatar modelSrc={avatarUrl} />}
</>
);
}
Visage offers a range of different rendering options that allow you to customize your avatar's visuals in lots of different ways. You can experiment with these rendering options here: https://readyplayerme.github.io/visage/?path=/story/components-avatar--showcase