Inverse Kinematics in three.js
Last updated: January 27, 2017
Three.js Version: r85
Inverse kinematics aren’t supported by three.js at this time. There are some libraries that can perform calculations in two dimensions, but because these calculations can be expensive, I recommend another way.
Use Blender since it supports inverse kinematics in three dimensions, and create animations before exporting to three.js. By doing IK in Blender, you are effectively baking the inverse kinematics into the animations to be used later. You won’t have the flexibility of dynamic IK, but your animations will be easier to make and look more natural.
Until someone builds an IK library for the 3 dimensions in the browser, I’m afraid we’ll just have to wait. One good thing about using baked animations though is being able to use three.js’s animation mixer class which allows you to fade between animations like a DJ fades between tracks.
Here’s an example of a model with IK animations and the mixer class.
Update: Here’s a promising library from github user glumb. https://github.com/glumb/kinematics
Get Email Updates
Enter your name and email to be notified when new tutorials and 3D models are available:
How I Made a 3D Ragdoll Game with JavaScript
Tutorials
advanced, physics, featured, sound, lighting, shadows,
Like most people, I love animated violence. It feels good to break things or knock them over. Maybe it’s to assert our dominance. Maybe it’s to destroy the weak making way for the strong. I don’t know, but here’s how I programmed a bird. ...
Getting Started with three.js
Tutorials
beginner,
Using three.js is a great way to incorporate 3D graphics into your browser whether it’s on a ...
Build a Star Wars Droid in three.js
Tutorials
featured,
I just saw Rogue One, so this next example features a Star Wars like droid. BB-8 may be your only hope… ...