Search code examples
javascriptjquerythree.jsaframewebvr

A-frame play specific animations from sketch fab

I am creating a scene using A-frame (https://aframe.io).

I am trying to put a gltf model of a crow in my scene from sketchfab.

The model of the crow from sketchfab has two different animations however - there is a moving pose and a static pose. Since the gltf has two different animations built into the model, when I put it into my scene, the model isn't animating because it's on it's default static pose.

How can I get the crow gltf model into my scene animated so that is plays the TakeOff animation?

Just for clarification, I am looking for a way to specifically reference TakeOff animation on the gltf model so that instead of the model not animating it should animate the TakeOff animation. The link to the crow gltf model: https://sketchfab.com/3d-models/crow-d5a9b0df4da3493688b63ce42c8a83e2

Code to get the gltf model into my scene:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <a-entity gltf-model="https://cdn.glitch.com/a9b3accf-725d-4891-aa13-0786dd661cab%2Fscene%20-%202021-07-01T193347.857.glb?v=1625193238260" position="20 0 -35" rotation="0 90 0" scale="1 1 1" animation-mixer="clip:Take 001; loop:10000000000000000000; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>

Solution

  • In order to use animation-mixer, you should include aframe-extras, of which it is a part. You can use their cdn, as you will find in the code below.

    The clip you are looking for is called root|takeOff, as you will see in the code.

    (Also, the code you posted has a different glTF of a wardrode instead of the crow you are looking for; so you should replace {{YOUR MODEL}} with the crow.)

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<a-scene>
  <a-entity gltf-model="{{YOUR MODEL}}" position="20 0 -35" rotation="0 90 0" scale="1 1 1" animation-mixer="clip:root|TakeOff; loop:10000000000000000000; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>

    Other animations you can use are root|LookAround and root|Eat.