Animations with Draco Loader three js

Questions
1

Hi,

I am using Draco with my model and created an animation in blender.

But i cannot find the animations in the animations array of the 3d element.

When i use “const clip = THREE.AnimationClip.findByName(clips, “Action”);”

I can find it in the console, but it doesn’t play at all.

here is my code :

let mixer;
let clock = new THREE.Clock();
dracoLoader.setDecoderPath(`/node_modules/three/examples/jsm/libs/draco/`);
dracoLoader.setDecoderConfig({ type: "js" });

gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load(
  "/Model/cosmosv6.gltf",
  function (gltf) {
    mixer = new THREE.AnimationMixer(gltf.scene);
    const clips = gltf.animations;
    const clip = THREE.AnimationClip.findByName(clips, "Action");
    const action = mixer.clipAction(clip);

    action.play();

    gltf.scene.children[1].material.map = videoTexture;
    gltf.scene.children[1].material.map.flipY = false;
    gltf.scene.children[1].material.map.rotation = Math.PI;
    gltf.scene.children[1].material.map.wrapS = THREE.RepeatWrapping;
    gltf.scene.children[1].material.map.wrapT = THREE.RepeatWrapping;
    gltf.scene.children[1].material.lightMapIntensity = 1.3;
    scene.add(gltf.scene);

    
    function animate() {
      if (mixer !== undefined ) mixer.update(clock.getDelta())
      action.play();
    }
    animate();
  }
2

I would recommend you start by checking that the export itself is correct. Test the model in an online viewer and see if the animation plays back.

3

it works perfectly on both of them

image
image1711×1356 178 KB

image
image312×855 33.5 KB

Here is the console.log(action)

image
image720×506 22.4 KB

4

It looks like you are calling action.play() on every frame in the animation loop, but not rendering the scene. You only need to call action.play() once, but should render the scene on every frame. The webgl / animation / keyframes example might be helpful.

5

Thank you very much, I made lots of changes and made some organizing in my code,

I don’t know what exactly I did but it works now. I hope I knew what I did to write it here for someone else with the same problem.