Links

Try Me!

Request a 2D full-body avatar image and display it in a web page.
The JavaScript code below sends a request to a readyerplayer.me server for a slightly smiling 2D full-body avatar and displays the image in a web page.
  1. 1.
    Save the code below as a .html file.
  2. 2.
    Open the file in your browser.
  3. 3.
    Click the Render button to send the request.
  4. 4.
    Wait for the response, which can take several seconds.
  5. 5.
    Verify and dismiss the alert.
  6. 6.
    The image should display.

Javascript code

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<!-- Click this button to send the request. -->
<button onclick="return render()">Render</button>
</body>
<script>
function render()
{
const params =
{
// Replace with the .glb URL for the desired avatar.
model: "https://d1a370nemizbjq.cloudfront.net/b31d89e2-bca5-45e6-bf1a-eb24b1afbe72.glb",
// Type of portrait to render.
scene: "fullbody-portrait-v1",
// Optional: Pose. Default: T-pose.
armature: "ArmatureTargetMale",
// Optional: Facial expression. Default: Empty.
"blendShapes": {"Wolf3D_Avatar": {"mouthSmile": 0.2 }}
}
const http = new XMLHttpRequest()
http.open("POST", "https://render.readyplayer.me/render")
http.setRequestHeader("Content-type", "application/json")
http.send(JSON.stringify(params))
http.onload = function()
{
// Show the response
alert(http.responseText)
// Parse the response and display the image
var image = JSON.parse(http.responseText)["renders"]
var outputImg = document.createElement('img')
outputImg.src = image
document.body.appendChild(outputImg)
}
}
</script>
</html>