const { ... } = useAvatar({ // Avatar State avatarId: 'af3f42c9-d1d7-4e14-bd81-bf2e05fd11a3', // Style Props scale: 1, style: {width: '400px', height: '400px'}, ... })
Show Loaders
useAvatar({ avatarLoaders: [ThreeJSPlugin] }) // Default loader
useAvatar({ avatarLoaders: [Live2dPlugin] })
useAvatar({ avatarLoaders: [RivePlugin] })
useAvatar({ avatarLoaders: defaultAvatarLoaders })
onAvatarLoaded: ({ avatarId }) => { console.log("avatarId", avatarId); };
Show child attributes
const { avatarDisplay } = useAvatar({ ... }) return <>{avatarDisplay}</>
const audioContextRef = useRef<AudioContext>(new AudioContext()); const [avatarInitialed, setAvatarInitialed] = useState(); const { ... } = useAvatar({ onAvatarLoaded: ({ avatarId }) => { setAvatarInitialed(true); } }); useEffect(() => { if (!avatarInitialed) return; connectAudioContext(audioContextRef.current); }, [avatarInitialed]);
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/> </> );
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])} /> </> );
const { availableTriggers } = useAvatar(...)
const { triggerEvent } = useAvatar(...) triggerEvent('happy')