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
The identifier of the avatar.
Avatar Loaders
The loader of Threejs.
Example: useAvatar({ avatarLoaders: [ThreeJSPlugin] }) // Default loader
The loader of Live2D.
Example: useAvatar({ avatarLoaders: [Live2dPlugin] })
The loader of Rive.
Example: useAvatar({ avatarLoaders: [RivePlugin] })
The loader of all provides (threejs, live2d, rive).
Example: useAvatar({ avatarLoaders: defaultAvatarLoaders })
Scale
The avatar size control.range: [-5, 5]
Rotation
The avatar rotation control.
On Avatar Loaded
The callback function when the avatar is loaded.
After the avatar is loaded, the avatarId will be returned.Example:onAvatarLoaded: ({ avatarId }) => {
console.log("avatarId", avatarId);
};
Function
Avatar Display
The avatar display component.
const { avatarDisplay } = useAvatar({ ... })
return <>{avatarDisplay}</>
Connect Audio Context
The function is connecting the audio context. (Web Audio API)
Examples:const audioContextRef = useRef<AudioContext>(new AudioContext());
const [avatarInitialed, setAvatarInitialed] = useState();
const { ... } = useAvatar({
onAvatarLoaded: ({ avatarId }) => {
setAvatarInitialed(true);
}
});
useEffect(() => {
if (!avatarInitialed) return;
connectAudioContext(audioContextRef.current);
}, [avatarInitialed]);
Connect Audio Element
The function is connecting the audio element. (HTML Audio Element)
Examples:const audioElementRef = useRef<HTMLAudioElement | null>(null);
const [avatarInitialed, setAvatarInitialed] = useState(false);
useEffect(() => {
if (!avatarInitialed || !audioElementRef.current) return;
connectAudioElement(audioElementRef.current);
}, [avatarInitialed]);
return (
<>
{avatarDisplay}
<audio ref={audioElementRef} hidden/>
</>
);
Connect Audio Node
The function is connecting the audio node. (Web Audio API)
Examples:const audioContextRef = useRef<AudioContext>(new AudioContext());
const [file, setFile] = useState<File | null>(null);
useEffect(()=>{
const nf = await file!.arrayBuffer();
const audioBuffer = await audioContextRef.current.decodeAudioData(nf);
const bs = audioContextRef.current.createBufferSource();
bs.buffer = audioBuffer;
connectAudioNode(bs);
bs.start();
},[file])
return (
<>
{avatarDisplay}
<input type="file" onChange={(e) => setFile(e.target.files![0])} />
</>
);
Available Triggers
Get all available shape flow triggers. For example: [“happy”]Example: const { availableTriggers } = useAvatar(...)
Trigger Event
Trigger the avatar blendshape motion when the function clicked!
Example:const { triggerEvent } = useAvatar(...)
triggerEvent('happy')
