0

I'm trying to understand this example in Three.js: http://threejs.org/examples/#webgl_animation_skinning_blending. I have some problems with this part of code (the BlendCharacter.js file).

this.load = function ( url, onLoad ) {

    var scope = this;

    var loader = new THREE.JSONLoader();
    loader.load( url, function( geometry, materials ) {

        var originalMaterial = materials[ 0 ];
        originalMaterial.skinning = true;

        THREE.SkinnedMesh.call( scope, geometry, originalMaterial ); // QUESTION (2)

        // Create the animations

        for ( var i = 0; i < geometry.animations.length; ++i ) {

            var animName = geometry.animations[ i ].name; // QUESTION (1)
            scope.animations[ animName ] = new THREE.Animation( scope, geometry.animations[ i ] );

        }

        (...)

    } );
};

I have two questions:

  • (Main) How does the 3D object (in Three.js format) already has animations with names? In the for loop, "geometry.animation[i].name" is "walk", "idle" and "run". I made animations with maya and blender (beginner level), but I do not see how to export multiple animations on the same mesh, and how to name them.

  • (Less) This is a matter of JavaScript syntax. Why "var scope = this;" ? I tried to replace "scope" by "this" in "THREE.SkinnedMesh.call(scope, geometry, originalMaterial);", but this make it no longer works.

Thanks for reading my questions !

PS : sorry for my english...

Aasha joney
  • 508
  • 5
  • 23
Koala1
  • 1
  • 1
  • Your (less) question is answered many times in SO. For instance here: http://stackoverflow.com/questions/4886632/what-does-var-that-this-mean-in-javascript and here: http://stackoverflow.com/questions/5355041/in-javascript-why-use-var-that-this. You should read up on scoping in javascript. – Bob Woodley Jan 09 '15 at 13:25
  • And @Michael Zucchetta for correcting my english :) – Koala1 Jan 13 '15 at 10:11

1 Answers1

2

(Main) question: When you are using Blender and if you create an animation, it automatically creates a name for the animation and you can change the name on action editor. Now it is possible to export multiple animations for a mesh. Inside the javascript code, you can call each animation by id (geometry.animations[id]).

  • Yeah, it took me a while to find this out. I saw many projects and they only had one animation, but this one in blender can be found at "/examples/models/skinned/marine/marine_anims_core.blend" (download at github the three.js code). Once you open you can easily find in the action editor menu. Good luck! – renno Sep 08 '16 at 02:28