I created an animation in Blender and exported it as a Three.js file to incorporate it into my Three.js code.
Below is the JavaScript code snippet:
var loader = new THREE.JSONLoader();
loader.load( "obj/dog5.js", function( geometry ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
mesh.scale.set( 10, 10, 10 );
mesh.position.y = 20;
mesh.position.x = 0;
var materials = mesh.material.materials;
for (var k in materials) {
materials[k].skinning = true;
}
animation = new THREE.Animation(mesh, "ArmatureAction", THREE.AnimationHandler.CATMULLROM);
animation.play();
lesson6.scene.add(mesh);
The error message I encountered is:
Uncaught TypeError: Cannot read property 'length' of undefined
This issue arises from this particular part of my code:
animation = new THREE.Animation(mesh, "ArmatureAction", THREE.AnimationHandler.CATMULLROM);
Upon checking the Three.js library file three.min.js, I noticed the following:
init:function(a){if(!0===a.initialized)return a;for(var b=0;b<a.hierarchy.length;b++)
Although my JSON file contains a hierarchy, it appears as undefined. This could be due to missing code components.
If I exclude the animation segment, the object renders correctly but remains static.
I am at a loss here. Any advice or guidance would be greatly appreciated! Thank you!
EDIT:
After some modifications, the rendering now works with the updated code below:
for ( var k in materials ) {
materials[k].skinning = true;
}
skinnedMesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
skinnedMesh.scale.set( 11, 11, 11 );
lesson6.scene.add( skinnedMesh );
animation = new THREE.Animation( skinnedMesh, skinnedMesh.geometry.animations[ 0 ], THREE.AnimationHandler.CATMULLROM);
animation.play();
However, the animation still does not play. Could it be related to needing a start time for animation.play? Or possibly an issue within my JSON file?
Your assistance is much appreciated. Thank you!