Load Avatars

Load 3D avatars into your React Project.

In the previous chapters, you learned how to integrate the avatar creator. As a result you get the URL to the avatar .glb model. In this chapter, we look into how to render the avatar in your app.

Load and render avatars with AvatarCreatorViewer

If you need a simple and quick solution for displaying the avatar result to your users, you can import AvatarCreatorViewer component which was shown in the Quickstart guide. This component is a wrapper around AvatarCreator component and Visage that gives some parameters to personalize the creator to viewer experience.

It utilizes the same parameters that were present in the AvatarCreator component and on top of it you can pass a ViewerConfig, a loadingNode and onAvatarLoaded callback.

Configure the How You Render the Avatar

In AvatarCreatorViewer component you can use some of the Visage parameters to customize how you display the avatars to your users.

viewerConfig: You can create an object with following params and pass it to the component to change certain parameters of Visage.

parameter	type	effect
poseSrc	string | Blob	Static pose to be loaded on avatar.
animationSrc	string | Blob	Animation loop to be played on avatar.
className	string	CSS class name.
style	CSSProperties	Inline CSS style object.
halfbody	boolean	Set true if avatar is halfbody.
shadows	boolean	Use shadows in scene.
scale	number	Scale of the avatar.
cameraTarget	number	Vertical height of the camera focus on avatar.
cameraInitialDistance	number	Initial direct distance of camera to avatar.
idleRotation	boolean	Play a subtle idle rotation animation on avatar.
headMovement	boolean	Make avatar head follow cursor.

loadingNode: When transitioning from AvatarCreator to the Viewer there will be seconds of time delay while the avatar is being downloaded in the background. During this time you can display a custom loadingNode parameter passed to AvatarCreatorViewer component. This parameter can either be a string or a JSX.Element with all the possible visual details. The content will be centered and fill in the main size of the component.

onAvatarLoaded: Using this callback parameter you can be notified when Avatar is finished loaded on to the screen.

Load and render avatars with Visage

Visage package is a dependency to the Ready Player Me React SDK, to load and render avatars and other 3D models. So in case you followed the Quickstart, you already have visage in your project.

This example should give you an idea of how simple it is to use. Import the component and pass the model URL to it.

import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from '@readyplayerme/visage';

const modelSrc = 'https://readyplayerme.github.io/visage/male.glb'; // this can be a relative or absolute URL

function App() {
  return (
    <Avatar modelSrc={modelSrc} />
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Customize the rendering

Visage comes with many options and parameters to customize the avatar's appearance, such as background, lighting, animations, camera-settings etc.

Please look into Storybook to check and test the full functionality and all parameters.

Screenshot of Storybook Docs