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.
This guide will teach you 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.
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>Last updated
Was this helpful?