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.Save the code below as a .html file.
- 2.Open the file in your browser.
- 3.Click the Render button to send the request.
- 4.Wait for the response, which can take several seconds.
- 5.Verify and dismiss the alert.
- 6.The image should display.
<!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>
Last modified 4mo ago