From Blender to Threefab. Exporting three.js morph animations
In previous blog posts I have talked about a powerful feature in Three.js… Loading external JSON models from a file. Today we are going to talk about the process of actually creating a model and animating it in Blender. We will then show how to export that file (with animations) for three.js. Finally we will use Threefab to test the animations and make sure everything is animating as expected.
Our simple lamp model rendered in Blender with Cycles 🙂
Creating a lamp model
Rather than starting with a complicated model I thought it would be easy to start with something extremely simple. A single pole lamp. The modeling of the lamp is SUPER easy. The base, poles, and shade are made of cylinders. Each joint is a simple primitive blender sphere.
Next, we need to rig up our lamp for animations. This is done in Blender using armatures. Armatures are basically bones that you can use to create a skeleton to represent the structure of your model.
Starting at the base we need to start adding armatures to our scene. (Shift-A) in blender will add a new armature like below. (Note: Be sure that your 3D cursor is at the base of the lamp) Also, be sure to go into the armature settings and turn on “X-Ray”. This will allow the armatures to show through the lamp model.
Our first armature
Building a skeleton
With the armature still selected we want to hit “tab” to go into edit mode. In edit mode select the tip of the armature and hit the “g” key to move the tip up. Move the tip until it is at the top of the first cylinder. We need to continue to extrude the armature to match the geometry of our lamp model. With the tip still selected hit the “e” key to extrude and move the extruded armature tip to right above the lamps first ball joint. Keep on extruding the armature until it matches the lamp. Confused? Just try to copy the image below.
Strike a pose
Next, we need to switch blender to “Pose Mode”. Find the drop down that says “Edit Mode” or “Object Mode” and toggle it to “Pose Mode”. Like so.
Now that we are in pose mode we can start to bind our armature skeleton to our lamp model. To do this we need to parent each bone to the corresponding section of our lamp model. Select the first cylinder just above the base. Then “shift + select” the first bone. With both selected hit “Ctrl + P” to bring up the parent menu. From the menu select “Set parent to bone”. Like so.
Go ahead and parent each of the bones in your armature to corresponding sections of your lamp.
Now comes the fun part. Adding inverse kinematics will help you pose your armature without having to move each bone individually. It is how animators create walking cycles for character models. With the top most bone selected goto the “Bone Constraints” tab and select “Inverse Kinematics”.
Select the tip of the top bone and move it using the “g” key. Magic! The lamp now springs to life as we bend it. We can now easily manipulate the lamp for animation.
Now that we have established our armature structure we can start moving them around to animate.
Setting up the timeline
To start let’s set our timeline up for a 30 frame animation. Set the “Start” value to 1 and the “End” value to 30. Make sure the play head is positioned on frame 1.
Position your lamp where you would like to start the animation. With all the bones selected in your armature hit “i” to insert a keyframe. From the keyframe menu choose “LocRotScale”. This will lock in the location, rotation, and scale properties for frame 1.
Next, move the play head to frame 5. Reposition the lamp any way you would like. Once again make sure all the bones are selected and hit “i” to insert another keyframe. Again choose “LocRotScale”. You should now have a 5 frame animation.
Continue this process until you have a 30 frame animation. The finished timeline should look similar to below.
Exporting our lamp
Finally make sure you have checked the “Animation” option so that the exporter will export your animation data. Also, depending on your model size you might want to bump up the scale. When finished click the “Export Three.js” button.
Testing using Threefab
To quickly test the exported animation you can use a tool I wrote called threefab. It’s a fabrication tool to quickly view and prototype three.js scenes. You can find Threefab at http://blackjk3.github.com/threefab/
First things first. Press “X” to get rid of the default cube. To test our animation simply drag and drop the model into the viewport. You should see a lamp in the middle of the screen. To play the animation click the play button in bottom left corner. If all goes well the lamp should animate!
Whew! That was a long one. Hopefully you now have a good sense of how to create an animation in blender and export it to Three.js. I have included all the blend files and the exported model below. Enjoy!