How to rig a character model for THREE.js in Blender

14 min readApr 22, 2018

I started making notes for myself about Blender hotkeys, but I realized I should put those notes on an electronic medium, keyword searchable for my future self. This article should be all I need in the future to get a model rigged up in Blender.

This article is part one of what could be at least 3+ articles related to THREE.js. Let me know if the comments at the bottom if you need more data like this.

I like JSON because it is inherently free and open source and aims to be fairly universal.

This article is based on this video from Sebastian Lague and it should make for the perfect companion to this text:

This article was created in approximately chronological order of steps taken. Here are the approximate steps:

Open Blender file or Import Model
Place Bones
Place IK Bones
Adjust Bone settings
Place Control Bone
Customize controls
Done

NOTE: When working in Blender, the Mode you are in is very important.

If your hotkey isn’t working, check which mode you are in.

I’d even go as far as to say that approximately 13.37 out of 10 times, being in the wrong mode will cause a problem. Many tutorials gloss over or assume which mode you are in, so you must watch closely. This gets easier as depth of Blender knowledge increases.

Bonus FYI: Press and hold the mouse wheel down to move the Camera.

Theory

Today, we will be rigging a bipedal locomotive or as some call it, a human. The science behind human movement can escalate quickly. I am going to show you how to rig up a human in as few bones as possible while retaining life-like movement. You can employ these techniques on any model.

Here is a photo that is representative of what we are doing:

We will be employing a bit of special magic to get the feet bending nicely and similar magic to get the arms moving realistically at the elbows.

Preparation

Open Character Model in Blender

Bones

If this is your first bone, press SHIFT + C to center character. You will see the red/black/white cursor target snap to the center. If you are reading this now, try pressing it. It is a non-invasive event that moves the Camera to origin(0, 0, 0).

Add Bone

Adding a bone is as simple as pressing: SHIFT + A if you are in Edit Mode.

If for example, you want to add a bone starting from the shoulder, Left Click the shoulder to put the target cursor there, then press CTRL + A.

Enable Bone X-Ray

In the right-side properties pane, Select Armature
Check X-Ray

Resize Bone

Right Click a Joint to select it
Drag the X, Y, Z axis arrows to mutate the dimensions

Move Bones

Right Click a Bone to select it
Hold SHIFT + Right Click to select multiple bones
Press G to move the selected bones

TIP: Use the number keys on the numpad to quickly place the Camera. Try pressing 0–9 on the numpad now. See what is happening? Press 0–9 again. Now, spam them at random like you are playing a song. Very nice.

Why do I care to mention the Camera placement? Because you can move the Camera on demand and see if your bone is centered inside the model. Remember, we are dealing with 3 dimensions, so your bone could still be horribly placed until you confirm it is not.

Extrude Bone

Normally, extruding is left for processes such as those at a candy factory where candy is extruded out of a machine and clamped at the correct time to create each piece of candy.

Today, we will be extruding bone instead. Let’s try it:

Place a bone where you want it
Press E
Move your mouse to place it
Left Click to complete the creation process

TIP: Remember, you can Shift + Right Click to select multiple bones and then press G to move them as a group.

Naming Bones

It’s very important especially on larger and/or more complex models to label your bones.

To not label your bones would be like naming your variables X1, X2, and X3 rather than Arm, Leg, and Head. You wouldn’t do it. That is to say I wouldn’t do it.

CRITICAL NOTE: Since our human model is symmetrical (very bone on the left side is repeated on the right side), we should append .L and .R as we name bones. You never get confused over which Bone you are dealing with.

In the right-side properties pane, Select Armature
Check ‘Names’
In the right-side properties pane, Select Bones
Type a name into the Name Field
Press ENTER or Left Click outside the field to save it

Bone Creation Order

Control IK Bones

IK stands for Inverse Kinematics, so these bones will be driven by different physics. From the photo above, we are talking about bone 9 and 10, the wrist and ankle.

These two bones will have an IK Constraint.

Once you create those two bones:

Right Click the outer Joint of 5 (Lower Arm.L)
Hold SHIFT
Right Click the lower Joint of 7 (Lower Leg.L)
Press E
Drag the IK Bones out parallel with the ground

Pole Targets

For realistic elbow and ankle movement, we need Pole Targets. These will be Bone 11 and 12, and they complement Bone 9 and 10 to help define movement of the arms and legs.

A Pole Target is a secondary target for a bone with an IK constraint. The first target is where the chain of bones is trying to get to, and the second target (ie: the Pole Target) is where the chain bends with respect to the Pole Target.

Deform

To complete the IK Bone creation process, turn off the Deform Property for each IK Bone.

Do this for:

Bone 9 (Wrist)
Bone 10 (Ankle)
Bone 11 (Elbow)
Bone 12 (Knee)

Steps:

Select a Bone
In the right-side properties pane, Select Bones
Uncheck Deform

Keep Offset

In order for the ankle to rotate correctly, we need to toggle a setting called Keep Offset. This will allow us to rotate the foot using the IK Bone.

Select Bone 8 (Foot)
Select Bone 10 (Ankle)
Press CTRL + P
Select Keep Offset

Pole Constraint with Target

If your brain is destroying itself from the inside, don’t worry. I’m pretty sure you will achieve great success just by following my steps even if you have no idea what we are doing or where we are going.

The next thing we need to do is tie the last few steps together. Our goal is to make the Elbow follow its respective IK Bone, likewise with the Ankle.

Select Bone 9 (Wrist)
Select Bone 5 (Lower Arm)
Enter Pose Mode
Press CTRL + SHIFT + C to load the Add Constraint (with Target) Menu
Select Inverse Kinematics
In the right-side properties pane, Select Bone Constraints
Select Chain Length: 2

NOTE: We selected Chain Length: 2 because the arm has 2 bones in it. We exclude the IK Bone.

We have one more critical step to do which instructs the Elbow to follow the Elbow IK Bone.

You should still be on this screen if you just selected Chain Length: 2, but if not, follow these steps:

Make sure you’re still in Pose Mode
Select Bone 5 (Lower Arm)
Press CTRL + SHIFT + C to load the Add Constraint (with Target) Menu
Select Inverse Kinematics
In the right-side properties pane, Select Bone Constraints
For Pole Target: put Armature
For Bone: put Bone 11 (Elbow)

Now, you should be starting to win wholesale. Let’s stop for a moment and admire what we accomplished:

When we move the Wrist IK Bone, the arm bends as we might expect;
When we move the Elbow IK Bone, the elbow follows it and the arm bends as we might expect given that movement;
Now, when we make animations, it will be impressively easy to achieve life-like movement in only a couple tweens.

Here is a funky chicken sampler pack:

I recommend taking a break at this point. Get up and walk around — absorb what we just did.

Now, do the leg:

Make sure you’re still in Pose Mode
Select Bone 7 (Lower Leg)
In the right-side properties pane, Select Bone Constraints
1 — For Pole Target: put Armature
2 — For Bone: put Bone 12 (Knee)
3 — Select Chain Length: 2

Once you do that, lets see how it moves:

Select the Ankle IK Bone
Drag the blue arrow to bend the leg up (ie: step up as a human would)

Wait, it’s completely mangled:

Pole Angle

Depending on your model, you have to rotate certain joints.

Pole Angle is joint rotation in degrees.

If you would stand up and raise your Knee, you would see that our model is bending his leg approximately 90 degrees in a terrible direction compared to how your leg would move. To fix that:

Make sure you’re still in Pose Mode
Select Bone 7 (Lower Leg)
In the right-side properties pane, Select Bone Constraints
Click Pole Angle and drag it left/right to approx +90 degrees

If we were rigging a spider or something crazy like that, we might select a more wild Pole Angle.

Take a bonus step back and make sure you can do this movement:

Select the Ankle IK Bone
Drag the blue arrow to lift the leg
Press R while the Ankle IK Bone is selected
Rotate the ankle up and down
Press ESC to ditch the rotation control
Select the Knee IK Bone
Drag the green arrow to move the knee side-to-side

You should see something like that in your Blender.

Duplicate Bones to Opposite Side

Now, we need to select every bone on the left side of the body (ie: everything except the Head, Chest, and Stomach) and duplicate them over to the right side.

Make sure you’re in Edit Mode
Press C to get the Brush Selector
Select all the left side Bones (ie: Exclude Head, Chest, Stomach)
Press W
Select Symmetrize

Boom, done.

The old way to do this in Blender was to select all the bones, then duplicate them with SHIFT + D, then press S, then press X, then hold — and press 1.

This is kind of a ridiculous sequence, but S, X, — 1 is kind of like a Mortal Kombat cheat code combo. It will flip the new bones over to the opposite side (ie: transform them like in math terms from the positive axis over to the same but negative axis).

The old way involved clicking Armature at the bottom left area and then selecting Flip Names, but that does not work for our purpose anymore. You can try it and see. It’s harmless after you press CTRL + Z. If you try that for science purposes, look at what happens with the .001 part.

The new way to duplicate and flip is to press W then select Symmetrize. This does all steps at once: duplicating and renaming L to R.

Optional Step — Turn off Display Names

You can turn off Bone Names now if you want due to clutter reasons:

In the right-side properties pane, Select Armature
Uncheck Names

Merge Mesh and Armature

Make sure you are in Object Mode
Select the Mesh
Hold SHIFT and select the Armature (to select both at the same time)
Press CTRL + P to get the ‘Set Parent To’ Menu
Select ‘With Automatic Weights’

You are probably noticing that we have some deformities sprinkled illegally in some areas. This is due to anomaly with Bone Constraints. Let’s fix that:

Make sure you are in Pose Mode
Right Click the problematic Bone (in this case, Lower Arm.R)
In the right-side properties pane, Select Bone Constraints
Adjust the Pole Angle (in this case, to about +100 degrees)

NOTE: if you ever see Bones exhibiting crazy weird movement symptoms, consider the Pole Angle first.

If you flip back and forth between Pose Mode and Edit Mode, you can what might need to be changed.

Torso Control

Our character needs to have better movement for the torso. To achieve that, we will connect the Upper Arms and Upper Legs to the bottom of torso (ie: the Stomach Bone).

Make sure you are in Edit Mode
Select the Upper Left Arm
Press and hold SHIFT
Select the Upper Right Arm
Select the Upper Left Leg
Select the Upper Right Leg
Select the Stomach Bone last
Let go of SHIFT
Press CTRL + P to access the ‘Make Parent’ Menu
Select ‘Keep Offset’

As we can now see, the movement of the character is extremely realistic:

Control Bone

We should put in a Bone that controls the entire body:

Make sure you are in Edit Mode
Press SHIFT + C to center the cursor
Press SHIFT + A to create a new Bone
Right Click the new Bone
Press R
Type -90 or -120 or freely rotate the Bone around to where you want it
You want it facing straight forward from the character’s perspective

BONUS TIP: Scroll to the top of this Article if you forget how to move Bones.

Label Control Bone

Right Click the Control Bone
In the right-side properties pane, Select Bone
Type in ‘Control’ or whatever you prefer

Make Control Bone the Root Parent

Now, lets connect this new Bone to the current master parent Bone (the Stomach Bone) with some new familiar steps:

Make sure you are in Edit Mode
Right Click to select the Stomach Bone first
Hold SHIFT to multi-select
Right Click the Control Bone
Let go of SHIFT
Press CTRL + P to access the ‘Make Parent’ Menu
Select ‘Keep Offset’

Attach IK Bones to Control Bone

Hold SHIFT and select all 8 IK Bones
While holding SHIFT, select the Control Bone last
Let go of SHIFT
Press CTRL + P to access the ‘Make Parent’ Menu
Select ‘Keep Offset’

Looks good.

Optional Step — Turn off Relationship Lines

Press N
In this opened right side pane, scroll down to ‘Display’
Uncheck ‘Relationship Lines’

Custom Control Shapes

If you would like to utilize custom shapes for extra-rad controls, check out these steps:

Select a New Layer at the bottom
Press SHIFT + A
Under ‘Mesh’, select ‘Circle’
Enter Edit Mode
Put the cursor in the middle of the Circle
Press E then S then drag the outer part of the Circle inward a bit (to give the Circle a bit of thickness)
Press SHIFT + A again
Under ‘Mesh’ again, select ‘UV Sphere’
Done

Note: New Layer is here at the bottom:

Now, go back to the first Layer where our character is.

Make sure you are in Pose Mode
Select an Elbow or Knee Bone
In the ride side properties pane, under Bone, select ‘Custom Shape’
Select ‘Sphere’
Fancy
Do the rest of the spheres too

You will notice the spheres are probably a bit too large. No problem:

Right Click a sphere
Below Custom Shape in the right side properties pane, change the scale
I set mine to 0.3 (30% of the original size)
Pick a number you like

For the Control Bone, we can select the Circle:

Right Click the Control Bone
In the right side properties pane, select Custom Shape
Select Circle
Ultra pro style, complete

Turn Off Unused Bones

Most of the bones we made we will never manipulate under normal circumstances, so we should hide those bones:

Make sure you are in Pose Mode
Select all Arm Bones (2 in total)
Select all Leg Bones (4 in total)
Select both Feet Bones (2 in total)
Press M to move them to another Skeleton Layer
Select a new layer, such as second row first slot
Done

If you want to see those hidden Bones again:

In the right side properties pane, select Armature
Under Skeleton Layers, notice the two layers
Click the second layer
Click the first layer again (just to see the two layers separately)
Now, hold SHIFT and select both layers
Boom, now both are displayed at the same time

Conclusion

And with that, we are done.

I suggest going through this process a few times on separate days to really commit everything to muscle memory. Blender hot keys are a bit nasty. That’s why I made this tutorial. I will probably need it again soon.

Follow me on Twitter to stay in the JavaScript render loop: