The only web-based avatar system you need.
- Loads GLB, FBX, VRChat, VRoid, .unitypackage humanoid
- Auto-detects rigs, height, orientation
- World scale matching
- HMD + gamepads input
- Bones orientation output
- Arms, legs inverse kinematics
- Walking kinematics
- Face animation (visemes) with microphone
- Hair/clothing animation
import './three.js';
import Avatar from 'https://avatars.exokit.org/avatars.js';
const avatar = new Avatar(model, { // model is the gltf object that includes the scene, can use https://github.com/exokitxr/model-loader
// all options are optional
// animate fingers
fingers: true,
// animate hair
hair: true,
// remove head for first person
decapitate: false,
// animate visemes (blink, mouth, etc.)
visemes: true,
// navigator.mediaDevices.getUserMedia({audio: true}); // microphone input for visemes
microphoneMediaStream,
// false to passthrough microphone audio
muted: true,
// add debug bone geometry
debug: true,
});
avatar.setMicrophoneMediaStream(microphoneMediaStream); // set microphoneMediaStream separately
function animate() {
const now = Date.now();
avatar.inputs.hmd.position.set(0, 1.5 + Math.sin((now%2000)/2000*Math.PI*2)*0.5, 0); // or, get pose from WebXR
avatar.inputs.leftGamepad.position.copy(avatar.inputs.hmd.position).add(new THREE.Vector3(0.2, -0.3, -0.3));
avatar.inputs.leftGamepad.pointer = 0.5; // for finger animation
avatar.inputs.leftGamepad.grip = 1;
avatar.inputs.rightGamepad.position.copy(avatar.inputs.hmd.position).add(new THREE.Vector3(-0.2, -0.3, -0.3));
avatar.setFloorHeight(0) // sets the floor height that exokit uses to determine the pose
avatar.update();
requestAnimationFrame(animate);
}
animate();
