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.
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. - 1.Copy the code below into a file and open it in your browser.
- 2.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 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.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'));
Last modified 2mo ago