Exporting 3DS Max camera animation to Sketchfab - work in progress


(Klaasnienhuis) #1

Inspired by Bart's camera animation script for Blender I've worked on a similar project in 3dsMax. Check it out here: https://dl.dropboxusercontent.com/s/elv2x20yc4mmtla/Animation-export.html?dl=0. Press the "start 0" and "start 1" buttons to start different loops within the animation.

I'd like to be able to start and stop different parts of the animation (takes) but my javascript skills are non-existent. Pressing the buttons multiple times seriously screws up the playback of the animation. Maybe someone is willing to give me some tips. This is the code involved, or just download the linked file.

    var f = 0;
    var loop0 = function () {
        f++;
        api.lookat(cameraList[f].cam, cameraList[f].target,0.01);
        api.setFov(cameraList[f].fov);
        setTimeout(loop0,33.3);
        if(f >= 99){f = 0};
    }
    var n = 100;
    var loop1 = function () {
        n++;
        api.lookat(cameraList[n].cam, cameraList[n].target,0.01);
        api.setFov(cameraList[n].fov);
        setTimeout(loop1,33.3);
        if(n >= 249){n = 100};
    }

    api.start( function () {
        document.getElementById("start0").addEventListener("click", function () {
            clearTimeout(loop1);
            api.start(loop0);
        } );

        document.getElementById("start1").addEventListener("click", function () {
             clearTimeout(loop0);
            api.start(loop1);
        } );

        document.getElementById("stop").addEventListener("click", function () {
            clearTimeout(loop0);
            clearTimeout(loop1);
            api.stop();
        } );

Camera animation
How about animated cameras in Sketchfab? +demo
Exporting Blender camera animation to Sketchfab - work in progress
Feature requests: notification title, custom environments, annotions
Status of animations?
(Bart) #2

Hey Klaas,

wow that looks amazing, and it's such a pleasure to see someone else pick up the idea! I moved your message to its own topic as I think it deserves the extra space, and made an edit in the intro to link back to the original thread.

How did you export the two different animation loops? And what kind of Javascript support would you need to continue?


(Paul Sketch) #3

Pressing the buttons multiple times seriously screws up the playback of the animation.

you have to get save the output of setTimeout and that's what you need to feed the clearTimeout calls.

var loop0TimeoutIndex = setTimeout(loop0,33.3);
clearTimeout(loop0TimeoutIndex );

I would call stop on each button ( clearing all timeout ) too before adding new animation.


(Klaasnienhuis) #4

Thanks Bart and Paul,
I've used Paul's suggestions and updated the document linked in the first post. It works great now. I can start and stop the animation and start different animation loops with each button.

Here's the new code for the buttons:

    var loop0Index = 0;
    var loop0TimeoutIndex;

    var loop0 = function () {
        loop0Index++;
        api.lookat(cameraList[loop0Index].cam, cameraList[loop0Index].target,0.01);
        api.setFov(cameraList[loop0Index].fov);
        loop0TimeoutIndex = setTimeout(loop0,33.3);
        if(loop0Index >= 99){loop0Index = 0};
    }
    
    var loop1Index = 100;
    var loop1TimeoutIndex;
    
    var loop1 = function () {
        loop1Index++;
        api.lookat(cameraList[loop1Index].cam, cameraList[loop1Index].target,0.01);
        api.setFov(cameraList[loop1Index].fov);
        loop1TimeoutIndex = setTimeout(loop1,33.3);
        if(loop1Index >= 249){loop1Index = 100};
    }
    
    api.start( function () {
        document.getElementById("start0").addEventListener("click", function () {
            clearTimeout(loop0TimeoutIndex );
            clearTimeout(loop1TimeoutIndex );
            loop0Index = 0;
            api.start(loop0);
        } );

        document.getElementById("start1").addEventListener("click", function () {
            clearTimeout(loop0TimeoutIndex );
            clearTimeout(loop1TimeoutIndex );
            loop1Index = 100;
            api.start(loop1);
        } );

        document.getElementById("stop").addEventListener("click", function () {
            clearTimeout(loop0TimeoutIndex );
            clearTimeout(loop1TimeoutIndex );
            api.stop();
        } );
    } );

I'm storing the result of the setTimeout functions and use that id to also stop that timeout. I've noticed stopping the api didn't actually stop the timeout. Only using cleartimeout works for me. I've only tested in firefox though.

@bartv: the two different loops are actually just one animation path. I've defined two functions which both use a different chunk of the list of coordinates. An alternative would be to export multiple cameras to multiple lists. That should make it a bit cleaner in the end.