> ## Documentation Index
> Fetch the complete documentation index at: https://docs.talking-avatar.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 3D avatars

> What your .glb avatar needs, and how to map other morph target names.

## Requirements

* **Format:** glTF binary (`.glb`). Meshopt-compressed models are supported.
* **Required:** the 15 Oculus viseme morph targets: `viseme_sil`, `viseme_PP`, `viseme_FF`, `viseme_TH`, `viseme_DD`, `viseme_kk`, `viseme_CH`, `viseme_SS`, `viseme_nn`, `viseme_RR`, `viseme_aa`, `viseme_E`, `viseme_I`, `viseme_O`, `viseme_U`. This is the standard Oculus/Meta lip-sync set that many avatar pipelines can export. Without them the mouth won't move, and a console warning says so.
* **Optional:** the ARKit morphs `jawOpen`, `mouthFunnel`, `mouthPucker`, `mouthRollLower`, `mouthClose`, `mouthPressLeft` and `mouthPressRight` give rounder and firmer lips. `eyeBlinkLeft`, `eyeBlinkRight` and `browInnerUp` drive blinks and brows.
* **Hosting:** the avatar's server must allow cross-origin requests (CORS) from your site, or serve it from your own origin.

## How it's shown

* The mouth, blinks and brows are animated. Nothing else moves.
* The camera frames the face in close-up (head and neck, no arms or hands) with soft portrait lighting.
* The canvas is transparent, so style the container's background as you like, for example with a blurred office photo.
* The container needs a width and height; the canvas follows its size.

The mouth mapping and the skin and eye materials are tuned for [Microsoft Rocketbox](https://github.com/microsoft/Microsoft-Rocketbox) avatars. Other avatars work, but may want different settings.

## Other morph names

If your avatar's mouth, blink or brow morphs have other names, map them with `morphTargets`. Keys are the standard names above (`viseme_aa` … `viseme_U`, `eyeBlinkLeft`, `eyeBlinkRight`, `browInnerUp`, `jawOpen` and the ARKit mouth names). Values are your avatar's morph name, or a list of names. Unlisted names are used as they are, and `[]` turns one off.

```js theme={null}
new TalkingAvatar({
  container,
  avatarUrl: "https://example.com/my-avatar.glb",
  morphTargets: {
    viseme_PP: ["LipsClosed"],
    viseme_aa: "MouthOpenWide",
    eyeBlinkLeft: "Blink_L",
    eyeBlinkRight: "Blink_R",
  },
});
```

Avatars whose morphs are named `h_expressions.<shape>_h` (for example `h_expressions.AE_AA_h`) are recognised and mapped automatically.

## Change the avatar

```js theme={null}
await avatar.setAvatar("https://example.com/another-avatar.glb");
// with its own morph names:
await avatar.setAvatar(url, { viseme_aa: "MouthOpenWide" });
```

It resolves when the new avatar is on screen. In React, change the `avatarUrl` prop.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.