Web

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

PreviousIntegration examples NextReact Native

Last updated 2 years ago

Was this helpful?

#168: React Guides

Change request updated 1 year ago

Web

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

In the 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 (). The following example shows how to import and use the model-viewer for loading a Ready Player Me avatar.

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

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 2 years ago

Was this helpful?

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

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

You need npm, which is part of , which needs to be installed in order to download the package. See the .

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

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'));