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.

Theory

Preparation

Bones

Add Bone

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

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

  • 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

  • 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

Deform

  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

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

Pole Constraint with Target

  • 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

Pole Angle is joint rotation in degrees.

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Mastering functional programming with Ramda Part 1: Why ‘both’ instead of ‘and’

PART 1 — DESIGN PRINCIPLES - SOLID

Build #Awesome User Experience with Dynamic Forms

Karate API Automation-Assertions using matcher apis

State Management in Angular + NGXS + .NET Core. What is it and why?

Persisted Data With Redux and LocalStorage — The Proper Way 2022

A WebAssembly backend for OCaml

$ALTEX Presale

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.

More from Medium

Top 20 UI Design Resources

The best resources for learning web design

How Bravo Studio delivers complex, native and beautiful apps in a flexible way

How To Add A Custom Font To A Shopify Store

font types