Try Me!

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

AVATARS - Previous

2D Avatars

Render API

Last modified 13d ago

Copy link