Updating animation without animate loop?

Questions
1

I’m trying to export every frame of the animation into a .png file. That i can do just fine. The problem is that in order to do so, i have to do that on the animate function loop and at each frame, save the URL and use nodejs to export to a png. With this method i have to wait for the entire animation to play to get the png’s.
I’ve tried using both the AnimationAction and AnimationMixer time and update but they didn’t seem to do anything(i was probably using it wrong). I’ve tried setting it inside the animate function loop when exporting is true and on separate functions that are called when you click the export button, but i had no luck and it didn’t do anything.
So, is there any way for me to do this exporting without all the waiting? Also, being able to set the time of the animation would be pretty handy because i could put several copies of the character in the scene, but in different locations to create a sprite sheet.
Thanks in advance.

2

You can advance the time of the mixer with its update() function: https://threejs.org/docs/#api/en/animation/AnimationMixer.update. That doesn’t have to be done inside of an animation loop, and you don’t have to use an animation loop at all if you don’t want to.

3

I’ve tried doing it outside. Even though it iterates the right amount of times and gives me the amount of pngs , the renderer ‘freezes’ during the export period, thus giving me only the same images every time. What’s i don’t understand is that i’m using a event listener to know when the loop ends, and it ends succesfully at the expected time(since it gives me the right amount of pngs) but the animation on the scene is not update(thus i’m only getting the same images).
Here’s the code for the export button:

var save = document.getElementById("export_png");
save.onclick = function (){

function func()
{
    exporting = false;
    for(var i = 0; i < urls.length; i++)
    {
        require("fs").writeFile("Resources/Export/out" + (i-1) + ".png", urls[i], 'base64', function(err) {
            //console.log(err);
        });
    }
    urls = [];
    mixer.removeEventListener("loop", func);
    mixer.time = 0;
    console.log("Finished!");
}

mixer.addEventListener('loop', func );

var step = 1/sampling;
var duration = cur_anim.animations[0].duration;
var action = mixer.clipAction( cur_anim.animations[ 0 ] );
action.reset();
mixer.time = 0;
exporting = true;

while(mixer.time < duration)
{
    console.log("Exporting...");
    var url = renderer.domElement.toDataURL( 'image/png', 1.0 );
    var dataurl = url.replace("data:image/png;base64,", "");
    urls.push(dataurl);
    mixer.update(step);
}

}

4

The loop event fires only when the mixer finishes an animation clip and restarts – I think that’s why you’re seeing the same clip repeatedly here. I also can’t see where you’re calling renderer.render( scene, camera ), which would be important to know. I’d suggest trying to get the animation and rendering into a single loop:

const step = 1 / sampling;
const exportURLs = [];

while ( mixer.time < duration ) {

  renderer.render( scene, camera );
  exportURLs.push( renderer.domElement.toDataURL( 'image/png', 1.0 ) );
  mixer.update( step );

}