JSON loader doesn't load the animation

[hulf]

When trying to export any animation from blender and load it with JSONLoader, the geometry.animation is undefined. When I load a JSON that is in the three.js example/models ... lets say knights.js it works.

loader.load('models/123.js', function (geometry, materials) { makeIT(geometry,materials)}); function makeIT(geometry,material) {console.log(geometry.animation.hierarchy.length);}

the json:

{

    "metadata": {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.7 Exporter",
        "vertices"      : 8,
        "faces"         : 6,
        "normals"       : 8,
        "colors"        : 0,
        "uvs"           : [],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 1
    },

        "scale" : 1.000000,

        "vertices" : [0.282971,-0.059365,-0.277163,0.278713,-0.0459321,0.283946,-0.282552,-0.0482188,0.279742,-0.278294,-0.0616519,-0.281367,0.268505,3.65467,-0.366188,0.264248,3.66811,0.194921,-0.297017,3.66582,0.190716,-0.29276,3.65239,-0.370392],
        "faces"    : [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],
        "uvs"      : [],
        "normals"  : [0.583941,-0.588641,-0.559008,0.575182,-0.560991,0.595325,-0.579455,-0.565691,0.586657,-0.570696,-0.593341,-0.567644,0.579455,0.565691,-0.586657,-0.575182,0.560991,-0.595325,-0.583941,0.588641,0.559008,0.570696,0.593341,0.567644],

        "skinIndices"  : [0,-1,0,-1,0,-1,0,-1,0,-1,0,-1,0,-1,0,-1],
        "skinWeights"  : [1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
        "morphTargets" : [],

        "bones"      : [{"parent":-1,"name":"Bone","pos":[0,0,-0],"rotq":[0.707107,0,-0,0.707107],"scl":[3.4158,3.4158,3.4158]}],
        "animations" : [{"name":"a","fps":24,"length":1.625,"hierarchy":[{"parent":-1,"keys":[{"time":0,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.0416667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.0833333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.125,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.166667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.208333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.25,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.291667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.333333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.375,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.416667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.458333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.5,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.541667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.583333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.625,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.666667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.708333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.75,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.791667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.833333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.875,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.916667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":0.958333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.04167,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.08333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.125,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.16667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.20833,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.25,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.29167,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.33333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.375,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.41667,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.45833,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.5,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.54167,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.58333,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]},{"time":1.625,"pos":[0,0,-0],"rot":[0.698582,-0.00125648,0.00407379,0.715517],"scl":[3.4158,3.4158,3.4158]}]}]}],

        "colors"    : [],
        "materials" : [
            {
                "DbgColor": 15658734,
                "DbgIndex": 0,
                "DbgName": "Material",
                "blending": "NormalBlending",
                "colorAmbient": [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
                "colorDiffuse": [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
                "colorEmissive": [0.0, 0.0, 0.0],
                "colorSpecular": [0.5, 0.5, 0.5],
                "depthTest": true,
                "depthWrite": true,
                "shading": "Lambert",
                "specularCoef": 50,
                "transparency": 1.0,
                "transparent": false,
                "vertexColors": false
            }
        ]
}

[nn4e]

geometry.animations[0]

[hulf]

I changed the line to geometry.animations[0].hierarchy.length. The output is: TypeError: a.hierarchy is undefined three.min.js:682

[titansoftime]

I don't think this is an issue with three.js. I load hundreds of models with about 8 skeletal animations each and they all work fine (though it would be nice if the exporter supported inverse kinematics).

There was a bug that is now fixed in the dev version where if you had multiple meshes with the same animation only one would work but it sounds like you are only trying one model so that is probably not the cause.

Exporting a three.js animation from blender is kind of a pain. You have to make sure the mesh is in rest pose, on the first animation frame and a whole bunch of other "rules".

https://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

The code in this link to load and the play the animation in three.js is outdated however the blender export rules are the same.

Also, this should probably be on Stackoverflow.

[hulf]

Thanks, I din't know that were any rules for making a animation in blender, since I did it exactly like on one of the tutorials on youtube. I will go trough the tutorial and hopefully I find what im doing wrong. I thought someone would see it from the JSON attached.

[hulf]

Still no luck. I think I did all exactly like in the howto:

[hulf]

My code:

[nn4e]

var animationK = new THREE.Animation(meshK, geometry.animations[0]);

[hulf]

[hulf]

I tryed animations to ( picture when I used my json ):

[hulf]

I assume that the JSON posted at top is not made like described in the given tutorial. The latest JSON I used in the tests above is: http://s000.tinyupload.com/?file_id=78634483427461751222 I sincerely sorry, the model is 1.27 MB big and on some 3 party host. The link for the knight.js is: http://threejs.org/examples/models/skinned/knight.js.

[nn4e]

There is no animations in your latest json knight.js has single bone animation plased in "animation" property (old format)

[hulf]

Upsy, you are right. Before I made the Blender model I played around with dev-exporter. It checked out the export skeleton option. The right JSON is: http://s000.tinyupload.com/?file_id=40733641668787747062 The output now is: console.log(geometry.animations[0].hierarchy.length) returns 1. console.log(geometry.animations[0].name) returns the name.

[nn4e]

I already gave you the correct syntax var animationK = new THREE.Animation(meshK, geometry.animations[0]);

[hulf]

Right, no more errors. The animation still doesn't play, must be something else; you solved my exporting problem, and my syntax. Thanks for your time and I hope it also helps someone else.