# How to use AnimationClip.CreateFromMorphTargetSequence to create animation for standard model

**URL:** <https://discourse.threejs.org/t/how-to-use-animationclip-createfrommorphtargetsequence-to-create-animation-for-standard-model/70573>\
**Category:** Questions\
**Tags:** morph-targets, blendshapes, animation\
**Created:** [September 10, 2024, 11:32pm UTC](https://discourse.threejs.org/t/how-to-use-animationclip-createfrommorphtargetsequence-to-create-animation-for-standard-model/70573 "2024-09-10T23:32:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![lourd](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lourd/32/51639_2.png) [@lourd](https://discourse.threejs.org/u/lourd)\
**Post date:** [September 10, 2024, 11:32pm UTC](https://discourse.threejs.org/t/how-to-use-animationclip-createfrommorphtargetsequence-to-create-animation-for-standard-model/70573/1 "2024-09-10T23:32:07Z")

</div>

In my application, I have a standard gltf model of a face that has a few dozen morph targets as part of the model. Users generate these models - they do not have any animations baked in. I want to animate the face to make a smile.

It looks like [AnimationClip.CreateFromMorphTargetSequence](https://threejs.org/docs/#api/en/animation/AnimationClip.CreateFromMorphTargetSequence) is capable of what I’m trying to do - give a starting keyframe and an end keyframe of all of the morph target values, and make an animation clip from those, then play the clip. I can’t figure it out for the life of me though, and it doesn’t look like the [source](https://github.com/mrdoob/three.js/blob/1174d07040d28ba59306419e295cc8f1d49b4d54/src/animation/AnimationClip.js#L77-L117) really matches the [types](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9c35f4f79fdc63355ec12cb3c9a3cd60bc529b89/types/three/src/animation/AnimationClip.d.ts#L44-L49). The types say that `morphTargetSequence` is an array of objects which each have an array of Vector3 `vertices`, but there’s nothing named `vertices` in the source.

Is it possible to do what I’m trying to do? My naive assumptions was it would work something like this. Here I’m setting a single blend shape/morph target’s value to 1 for a single keyframe, then back to 0.

```javascript
const clip = AnimationClip.CreateFromMorphTargetSequence(
  "winking",
    [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    ],
    [
      0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    ],
    [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    ],
  ],
  30,
  false
)

```

---

<div class="post-metadata">

**Author:** ![lourd](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lourd/32/51639_2.png) [@lourd](https://discourse.threejs.org/u/lourd)\
**Post date:** [September 11, 2024, 9:12pm UTC](https://discourse.threejs.org/t/how-to-use-animationclip-createfrommorphtargetsequence-to-create-animation-for-standard-model/70573/2 "2024-09-11T21:12:47Z")

</div>

I ended up writing my own version. I’m pretty sure `AnimationClip.CreateFromMorphTargetSequence` is broken, the `values` it makes are literally just `[0,1,0]`… 🤔 And it’s also doing some extra sorting that you don’t need to do if your `times` and `values` are already sorted.

Here’s my simple version:

```javascript
import { AnimationClip, NumberKeyframeTrack } from "three"

export interface MorphTargetSequence {
  name: string
  times: number[]
  values: number[]
}

export function createMorphTargetSequenceAnimationClip(
  name: string,
  morphTargetSequences: MorphTargetSequence[],
  fps: number
) {
  const tracks = morphTargetSequences.map((sequence) => {
    return new NumberKeyframeTrack(
      ".morphTargetInfluences[" + sequence.name + "]",
      sequence.times,
      sequence.values
    ).scale(1.0 / fps)
  })
  return new AnimationClip(name, -1, tracks)
}

```

And using it looks like this, for a one-shot animation of blinking twice:

```javascript
const blinkClip = createMorphTargetSequenceAnimationClip(
  "blinking",
  [
    {
      name: "eyeBlinkLeft",
      times: [0, 1],
      values: [0, 1],
    },
    {
      name: "eyeBlinkRight",
      times: [0, 1],
      values: [0, 1],
    },
  ],
  30
)
const animMixer = new AnimationMixer(skinnedMesh)
animMixer.clipAction(blinkClip)
  .setLoop(LoopPingPong, 4)
  .setDuration(0.15)
  .play()

```