As a newcomer to Blender, 3DS MAX, ThreeJS, and graphics programming in general, I encountered an issue with animating a Mutalisk from StarCraft. I imported the animation as an .m3 file into Blender, then exported it as a .json for use in my ES6 application. However, although the position of the Mutalisk changes correctly, the flapping animation does not occur as expected.
Below is the code snippet for my renderer:
import THREE from 'three';
export default class Renderer {
constructor(game, canvas) {
this.game = game;
this.canvas = canvas;
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, this.canvas.width / this.canvas.height, 1, 10000);
this.camera.position.z = 2;
this.camera.position.y = 1;
this.clock = new THREE.Clock;
this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
this.renderer.setSize( this.canvas.width, this.canvas.height );
}
// called by my Game class, which waits for the mesh to load before attempting to add it to the scene
addMeshToScene(mesh) {
this.mesh = mesh;
this.scene.add(this.mesh);
this.animation = new THREE.Animation(
this.mesh,
this.mesh.geometry.animations[ 2 ]
);
this.animation.play();
}
renderFrame() {
THREE.AnimationHandler.update(this.clock.getDelta());
this.renderer.render(this.scene, this.camera);
}
}
In the rendered output, the Mutalisk appears to bounce along the Y-axis but lacks the expected flapping motion. Any insight on why the movement occurs without the flapping animation would be greatly appreciated.
Edit: Here are the export settings used in Blender.