Web

Load and show your Ready Player Me avatars on the web.

In the Quickstart you learned how to open the Avatar Creator in an iframe and get a valid Avatar URL.

In this guide, you will learn how to display the avatar in your website or app. Loading and displaying the avatars in your web app or page requires a webGL-based rendering tool and the Canvas.

There are many different open source options.

We recommend model-viewer, as it is straightforwad to get started.
If you need more customization options, use Visage, Ready Player Me's own 3D avatar rendering package for the web.

Model Viewer

The easiest way to load and display avatars on a web-page is to use the open-source package model-viewer (https://modelviewer.dev/). The following example shows how to import and use the model-viewer for loading a Ready Player Me avatar.

-> Read the full Model Viewer Documentation (third-party)

Copy the code below into a file and open it in your browser.
Change the avatar URL to display a different avatar.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <style>
        #modelviewer {
            height: 400px;
            width: 600px;
        }
    </style>
</head>

<body>
    <model-viewer id="modelviewer" alt="Ready Player Me Avatar"
        src="https://api.readyplayer.me/v1/avatars/6185a4acfb622cf1cdc49348.glb" shadow-intensity="1" camera-controls
        touch-action="pan-y">
    </model-viewer>
</body>

</html>

Visage

Visage is an open-source library for showcasing Ready Player Me avatars and 3D models on the web. You can find it in this GitHub Repository.

You need npm, which is part of Node.js, which needs to be installed in order to download the package. See the instructions for installing Node.js.

You can find code examples of the components and their documentation on this GitHub page.

Below is the first example to get you started.

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

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

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

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

PreviousIntegration examples NextReact Native

Last updated 3 years ago

Was this helpful?

hashtagModel Viewer

hashtagVisage

Model Viewer

Visage