Custom Models and Animations

By default, the SimpleCharacter component uses a built-in robot avatar. You can easily replace this with your own 3D model by providing a URL to the model file in any of the following formats:

import { SimpleCharacter } from '@react-three/viverse'

export function MyCharacter() {
  return <SimpleCharacter model={{ url: '/path/to/your-model.vrm' }} />
}

Your can replace the default animations of the SimpleCharacter component with files in any of these three supported animation formats:

Make sure to either use a bone map, e.g. when your bone names follow the mixamo naming conventions use the mixamoBoneMap or use the standard VRM bones for the animation amature as shown above under "VRM 1.0 humanoid bone names".

Each animation type can be configured individually:

<SimpleCharacter
  animation={{
    walk: {
      url: '/animations/walking.fbx',
      boneMap: mixamoBoneMap,
      removeXZMovement: true,
      scaleTime: 0.8,
    },
    run: {
      url: '/animations/running.vrma',
    },
    idle: {
      url: '/animations/idle.gltf',
      trimTime: { start: 0.5, end: 3.0 },
    },
  }}
/>

You can customize any of these animation slots: