Here’s all properties of useAvatar hook.
const { ... } = useAvatar({
    // Avatar State
    avatarId: 'af3f42c9-d1d7-4e14-bd81-bf2e05fd11a3',
    // Style Props
    scale: 1,
    style: {width: '400px', height: '400px'},
    ...
})

Width and height inside style props must be set to fix the size of the canvas.

Requirement

Avatar Id

avatarId
string
required

The identifier of the avatar.

Avatar Loaders

avatarLoaders
LoaderPlugin<any>[]

Scale

scale
number

The avatar size control.

range: [-5, 5]

Rotation

rotation
number

The avatar rotation control.

On Avatar Loaded

onAvatarLoaded
function

The callback function when the avatar is loaded.

Function

Avatar Display

avatarDisplay
ReactNode
required

The avatar display component.

Connect Audio Context

connectAudioContext
function
required

The function is connecting the audio context. (Web Audio API)

Connect Audio Element

connectAudioElement
function

The function is connecting the audio element. (HTML Audio Element)

Connect Audio Node

connectAudioNode
function

The function is connecting the audio node. (Web Audio API)

Available Triggers

Available in ThreeJSPlugin and RivePlugin.

availableTriggers
string[] | undefined

Get all available shape flow triggers. For example: [“happy”]

Example: const { availableTriggers } = useAvatar(...)

Trigger Event

Available in ThreeJSPlugin and RivePlugin.

triggerEvent
function

Trigger the avatar blendshape motion when the function clicked!