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

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

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.

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

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

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
Fig X.X — 0% Phallic Reference

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.

  • 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:

  1. Bone 9 (Wrist)
  2. Bone 10 (Ankle)
  3. Bone 11 (Elbow)
  4. 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

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:

  1. When we move the Wrist IK Bone, the arm bends as we might expect;
  2. When we move the Elbow IK Bone, the elbow follows it and the arm bends as we might expect given that movement;
  3. 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.

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)

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

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

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:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Mackintosh

I prefer to work near ES6+, node.js, microservices, Neo4j, React, React Native; I compose functions and avoid classes unless private state is desired.