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 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