Revision history [back]

To create multiple animations for a single object in Three.js Fiber using Blender, you can follow these steps:

1. Create your object in Blender and add all the animations you want to it.

2. Make sure each animation is saved as a separate action in the Action Editor.

3. Export your object as an fbx file.

4. In Three.js, load the fbx file and its animations using the FBXLoader.

5. Create a mixer object to manage the animations.

6. Create an animation clip for each animation you want to play.

7. Add each animation clip to the mixer.

8. When you want to play a specific animation, use the mixer to set the clip and start the animation.

Here is an example code snippet:

const loader = new FBXLoader();
loader.load('my-object.fbx', (object) => {

  const mixer = new THREE.AnimationMixer(object);

  const clip1 = THREE.AnimationClip.findByName(object.animations, 'animation1');
  const clip2 = THREE.AnimationClip.findByName(object.animations, 'animation2');

  mixer.clipAction(clip1).play(); // start playing the first animation

  scene.add(object);

  // switch to the second animation after some time
  setTimeout(() => mixer.clipAction(clip2).play(), 2000);

});