DrawUtils
Drop-in helpers for visualizing Bodygram avatars in your web app.
What is DrawUtils?
BodygramSDKDrawUtils is a small companion package to the Headless SDK. It renders Bodygram avatars — and the overlays that come with them — directly into your DOM, so you don't have to write any three.js boilerplate, manage a render loop, or wire up custom shaders.
Pass a Bodygram response, point at a container, and a fully interactive avatar shows up.
const utils = new BodygramSDKDrawUtils({ locale: 'en' });
utils.drawAvatar(response, { container: 'avatar' });Why use it?
- Zero setup. No three.js scene, no camera, no lighting, no controls — just call a method.
- One line per avatar. Renders with sensible defaults out of the box and returns the DOM node so you can keep manipulating it.
- Self-contained. Ships as its own UMD and ES build, separate from the main SDK, so you only pay for it when you use it.
What can I draw?
DrawUtils exposes four draw methods. Each one accepts a full estimation response (not just the avatar field) and a container, and returns the rendered DOM node.
| Method | Renders | Compatible responses |
|---|---|---|
drawAvatar | The 3D avatar mesh, on its own. | Bodygram Scanner Platform · Body2Fit |
drawAvatarWithRingsAndIndicators | The avatar with measurement rings and labeled value indicators. | Bodygram Scanner Platform · Body2Fit |
drawFrontPosture | The avatar with front posture lines (shoulder, hip, ear-tilt). | Bodygram Scanner Platform photo only |
drawSidePosture | The avatar with side posture body line. | Bodygram Scanner Platform photo only |
Posture overlays are limited to getBodygramScannerPlatformPhotoEstimation responses — Body2Fit responses do not carry posture data, and stats-based platform responses have entry.posture === null.
What's next
- Loading DrawUtils — add the script (and its
threedependency) to your page. - Draw avatar — render the bare 3D avatar from any supported response.
- Draw avatar with rings and indicators — overlay measurement rings and labeled values on the avatar.
- Draw posture avatar — render front and side posture overlays with a live playground.
- API reference — full method signatures, options, and types in one place.