Tag Archives: Three.js

Greensock & Three.js

Good news Flash fans.

You’ve switched to HTML5 & JavaScript and you want to have some control over your animations like you had before. Well, remember that awesome Greensock animation library? It has arrived for JavaScript. Complete with TweenLite, TweenMax, TimelineLite, and TimelineMax. All your favorites are there. Come on, who hasn’t thrown in a Bounce.EaseOut on an animation and called it a day? And as a bonus, the syntax is so similar you would think you were still writing in AS3. To see the power of the Greensock library we combined it with Three.js to animate some WebGL!

Getting started

First thing we need to do is setup Three.js to work with the Greensock animation library. Our main problem is that both libraries want to have their own request animation frame (rAF) loop. Luckily, Greensock comes with a tick listener that we can use to render our Three.js scene. Like so…

Now that we have our render loop setup we can start with a simple example. Let’s say we want to animate a few mesh objects within a sequence. We want each to last for 2 seconds and we want to stagger them 0.2 seconds apart.

This is starting to looking good. However, what if we want more control over our sequenced animation? Maybe we want to pause the sequence. Maybe we want to reverse it. TimelineLite is going to be our new best friend for the job.

TimelineLite

We can rewrite our previous example using a timeline. Additionally, we will listen for when the entire sequence is complete and reverse it.

A more complicated example

So, we’ve seen a pretty simple example using the timeline features of Greensock. Let’s try to expand upon this simple example and see what we can create. Hmmm… How about we add a horse model from the ROME project and see if we can make it jump over the dominoes! Normally we would use the animation loop to control the jump using a sine curve or something similar. However, for this specific example we are just learning so timelines are sufficient.

Adding a horse

First thing we need to do is load the horse JSON model. You can get that from the three.js github project.

THREE.js Github

Next, we will add the horse mesh to our scene and give it a brown material. Morph targets must be enabled if you want to have the horse to run as he’s animated. Morph targets are keyframe animation data that can be built into the JSON model. If you need more information on morph targets visit a previous blog post.

Morph Targets

Finally, we will write three tweens to create a simple jump animation. We set a total time interval of 8 seconds and script the duration and delay of each tween to be a percentage of the total time for easier adjustments. At this point (like most animations) it is a matter of fiddling with the numbers to get something desirable.

Conclusion

The Greensock animation library was an awesome resource in Flash and seems to be a solid option for JavaScript as well. I am sure that it will only get better with future releases. It is an exciting time to be a creative JavaScript developer.

Get Source

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.

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

1 2 3