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

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

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.

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

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.

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

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

Deform

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

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

  • 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
  • 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)
  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.
  • 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
  • Select the Ankle IK Bone
  • Drag the blue arrow to bend the leg up (ie: step up as a human would)

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

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

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’
  • 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)

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’

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’

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

--

--

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

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.