Tag Archive: WebGL


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.

Adding armatures

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.

Getting started

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.

Inverse Kinematics

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.

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.

Inserting Keyframes

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

Next, we need to export our model to a javascript file containing our all our model and animation data. You will need to have installed the Three.js exporter for blender as described in previous tutorials. To export goto File -> Export -> Three.js

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!

Conclusion

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!

Lamp blends + Exported Model

Introducing Threefab for three.js

ThreeFab is a tool that allows designers and developers to quickly fabricate and manipulate a three.js scene. This is currently an alpha build as a proof of concept. You will need a WebGL capable browser.



TRY IT OUT
GITHUB

Three.js now with 3D Glasses!

I was digging around the Three.js docs on github the other day and saw a reference to a renderer I had not seen before. It was labeled AnaglyphWebGLRenderer. I already knew about the canvas renderer and the WebGL renderer. I thought I would throw it in and give it a try. Changing one line of code from our previous Three.js tutorial I now had a 3D model rendering with support for the old school 3D glasses. Pretty cool! Or a raging headache.

Change this line in the previous Three.js example.

webglRenderer = new THREE.AnaglyphWebGLRenderer();

Mr. Bird in Stereo

We make this look good…

Now all you need to do is get your 3D glasses on and check out the new and improved Mr. Bird