Make a 3D Avatar: Browser Studio, Transparent PNG and Interactive HTML
Choose a shape, color, material and style in Dot Avatar Maker, export a profile image and check the actual download. Understand WebGL and CDN requirements before starting.
Fastest way
Ask your AI to do it
Paste this into the AI agent you already use:
Use Dot Avatar Maker v1.0.1 to prepare a working copy of its browser studio. Confirm WebGL and CDN access, then help me choose form, color, material and style. Explain that the optional launcher only copies and presets the studio. Check an actual transparent 1024-square PNG and reopen the exported interactive HTML with rotation. Keep the editable studio separately and disclose the CDN dependency. Do not call image generation or a paid API.
What does Dot Avatar Maker actually create?
Dot Avatar Maker v1.0.1 is an interactive 3D avatar studio. Its four steps choose form, color, material and style. The studio exports a transparent 1024 × 1024 PNG or an interactive HTML character page. It is a browser-rendered character builder; it does not require an image-generation API or render a video.
The package is free for verified Skillrove accounts. A WebGL-capable browser and internet access to its Three.js CDN are required. A single HTML file is not a fully offline delivery: exported interactive pages also load the CDN. The optional Node launcher copies and presets the studio; it does not export the final PNG for you.
Start with the included studio, without installing dependencies
Read SKILL.md and references/customizing.md in the complete package. Copy references/avatar-maker.html into a new working location, then open that copy in your browser. Keep the packaged source intact. If your environment restricts local-file modules, serve only the working copy from a loopback local server. Do not expose your project directory publicly.
The optional launcher below prepares a cloud character with yellow plush material and the gentleman style at the style step. Run it from the installed package, choose a new output filename and open the written HTML yourself. --no-open deliberately avoids launching a browser.
node scripts/open-maker.mjs --no-open --shape cloud --color yellow --material plush --style gentleman --lang en --step 3 --out ./my-dot-studio.htmlChoose a readable character before exporting
- Form: pick a silhouette that stays recognizable in a circular profile crop.
- Color: compare the character with both light and dark destination backgrounds.
- Material: inspect the actual rendered surface; a label alone does not establish appearance.
- Style: check accessories at small profile size and keep enough edge space.
Check both downloads as real files
A saved studio, an exported character HTML and a PNG serve different purposes. Keep the editable working studio for later changes. Do not describe the interactive HTML as a 3D model file, a video or a self-contained offline viewer. Test the actual destination before promising an integration.
| Export | Review before handoff |
|---|---|
| PNG | Open the actual image, confirm 1024 × 1024 pixels, inspect transparency and preview a 48-pixel circular crop. |
| HTML | Reopen the downloaded character page, drag to rotate, and confirm its CDN loads in the destination browser. |
What to check when the avatar is blank
Check browser WebGL support and access to the CDN first. A generated HTML file alone does not prove successful rendering. Review visible browser errors without sharing secrets; do not disable browser security or substitute a paid API. After a material or style change, wait for the visible result and export again rather than reusing an older image.