Unable to process animation with multiple morph targets with JSONLoader - three.js

Question

I've made a simple scene in blender which contains a simple box and two shape deformation keyframes.
My exported .js file contains lots of morph targets (each one for each animation frame I suppose?), but still no animation shown in production, just a static box.
Here's the way I'm trying to get this working:
<script src="three.js" type="text/javascript"></script>
<script type="text/javascript">
var size_width = window.innerWidth;
var size_height = window.innerHeight;
var player;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, size_width/size_height, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var animation;
var animOffset = 1;
var duration = 1000;
var keyframes = 101;
var interpolation = duration / keyframes;
var lastKeyframe = 0;
var currentKeyframe = 0;
renderer.setSize(size_width, size_height);
document.body.appendChild(renderer.domElement);
camera.position.x = 10;
camera.position.y = -20;
camera.position.z = 10;
camera.rotation.x = 1.4;
var player_loader = new THREE.JSONLoader();
player_loader.load( "boxy.js", function(geo) {
player = new THREE.Mesh(geo);
scene.add(player);
});
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
if ( player ) {
var time = Date.now() % duration;
var keyframe = Math.floor( time / interpolation );
if ( keyframe != currentKeyframe ) {
player.morphTargetInfluences[ lastKeyframe ] = 0;
player.morphTargetInfluences[ currentKeyframe ] = 1;
player.morphTargetInfluences[ keyframe ] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
player.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
player.morphTargetInfluences[ lastKeyframe ] = 1 - player.morphTargetInfluences[ keyframe ];
}
renderer.render(scene, camera);
}
animate();
</script>
here's my export:
http://touhou.ru/upload/7b7513a903963b0804b0be763b8cc67c.js
Also no errors were reported to the console.

Answer 1

You need to render your mesh with a material that expects morph targets. You can do this by instantiating a material with the morphTargets boolean set to true in the constructor options.
I'm not sure how familiar you are with three.js, but in most cases people create mesh objects with both a geometry object and a material object passed to the mesh constructor as arguments. You only gave the constructor a geometry object.
To get the animation running in your code change the line where you instantiate a new mesh in the loader callback:
player = new THREE.Mesh(geo);
to instantiate a mesh with a material with morph targets enable:
player = new THREE.Mesh( geo, new THREE.MeshLambertMaterial({ morphTargets: true }) );
When I ran your code with that change I saw one corner of a cube deforming outward and then back in.