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

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.

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

Theory

Preparation

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

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.

Fig X.X — 0% Phallic Reference

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

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

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.

Control IK Bones

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

Pole Angle is joint rotation in degrees.

Duplicate Bones to Opposite Side

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.

Merge Mesh and Armature

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

Torso Control

Control Bone

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

Custom Control Shapes

Note: New Layer is here at the bottom:

Turn Off Unused Bones

Conclusion

--

--

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