Does three.js supports FK (forward kinematics) and IK (Inverse kinematics)?

If the answer is yes, are there any simple examples about FK or IK?
Many thanks!

AFAIK, there is no IK solver if you are looking for that. FK is the normal process of transforming a chain of bones. So it’s effectively the same like transforming a hierarchy of objects in the scene graph top-down. Of course you can do that in three.js.

Can you please explain a little bit what are you trying to achieve?

1 Like

cubexpansion
@Mugen87
I want to make a cube folding experience just like in real world such as one can drag square A to the bottom side of the red square.

Hi!
Have a look at this SO answer

2 Likes

Some time ago, I packed a package for Christmas 2016.
http://threejs.hofk.de/geometrie/03_weihnacht_wuerfel.html
Variables and comments are in German ( for a German forum), but easy to translate. Works very well with https://www.deepl.com/translator.

20180410-0819-16317

The lines to the point.


// Paket basteln //Package tinkering
paketGeo = new THREE.Geometry(); … and the following lines to paketGeo

function hochfalten(geo,w){ // fold up

function deckeldrauf(geo,w){ // lid on it

function deckelauf(geo,w){ // open lid

function deckelzu(geo,w){ // lid closed


Currently I would do it with BufferGeometry.

Maybe that helps something.

2 Likes

@prisoner849
It’s quite impressive about the delicacy of handling the 6 sides.
I used a lot of time to figure out the logic behind the scene.

BTW, are there any more obvious ways to set/get the center and local coordinates of an object?

@hofk

The Christmas animation is very beautiful.
I am sure there are a lot for me to learn from.

Thanks for your and prisoner849’s kind help, I think I can do the animation of folding a cube now.
But the remaining issue is how to let a person to fold the cube by dragging the squares freely.

Possibly, yes, there is a more obvious way. I just didn’t think about it :slight_smile:
It needs more attention and time to build an applicaion, especially, when you want to have such level of interactivity, like dragging the planes of a cube freely.

1 Like

To do this you need raycaster.

On threejs.hofk.de I have examples for beginners, partly German, partly English.

Look for http://threejs.hofk.de/raycaster/raycaster.html
Note! The coordinates are stored in the local storage of the browser.

More complicated examples
http://sandboxthreef.threejs.hofk.de/modifyRaycastMultiMaterial.html
http://threejs.hofk.de/modifyGeo/modifyGeo.html
A problem with multi material was solved by @Mugen87: [SOLVED] Raycaster - MultiMaterial

Have fun doing it. :relaxed:

2 Likes

The mmd format of THREE has an actual IK solver

https://threejs.org/examples/#webgl_loader_mmd

3 Likes

I’ve totally overlooked that file :sweat_smile: : https://github.com/mrdoob/three.js/blob/dev/examples/js/animation/CCDIKSolver.js

3 Likes

@Mugen87 not to mention how short that mysterious file is, for such a robust looking one.

3 Likes

Thanks all for kind help.
After some test and try, I found that IK maybe not suitable for my scenario.
I figured out another way and started another try.

@Fyrestar Yes, it’s really amazing!!

Relevant work in progress: https://jsantell.github.io/THREE.IK/

3 Likes

I made a cube folding and unfolding applet which is aimed for K12 education.
The basic function is OK but still has bugs.
You can have a try by visiting “3dmath.fun”.
I built the website to help kids to learn math by playing around.
And I am looking for experts to join to make more applets together by part-time as a hobby.
If you’re interested or have any ideas, please contact with me by "jero2008@aliyun.com".

I made a cube folding and unfolding applet which is aimed for K12 education.
The basic function is OK but still has bugs.
You can have a try by visiting “3dmath.fun”.
I built the website to help kids to learn math by playing around.
And I am looking for experts to join to make more applets together by part-time as a hobby.
If you’re interested or have any ideas, please contact with me by "jero2008@aliyun.com".

1 Like

FK (Forward Kinematics)
Forward Kinematics means your character rig will follow the hierarchal chain. This means more control over your chain, but also means you’d need to position each joint in your chain independently of each other. For example, with FK if you positioned the character’s hand the rest of the arm wouldn’t follow like it does with IK. Instead you would need to position each joint independently, starting with the upper arm, the elbow and then the wrist. This obviously takes more time than IK, but can give the animator much more control of the poses. Most times riggers will incorporate both FK and IK into the rig to meet the animator’s needs.

IK (Inverse Kinematics)
Inverse Kinematics means that the child node within your rig’s hierarchy can influence the movement of its parents. For ex ample, if you use IK for your character’s arm you can position your character’s hand and the rest of the arm chain will be calculated. This allows the animator to animate independently of the chain’s hierarchy. Because of this IK is great when needing to have a character’s arm stay planted on something. For example, pushing against a wall or swinging on a bar.


Fabrik for three.js
An implementation of FABRIK (Forward And Backward Inverse Kinematics) aside a little threejs library intended to provide easy three dimensional inverse kinematics for threejs and beyond. It can be used with IK chains of any length your computer can handle.

Github


CCDIKSolver.js = @Mugen87 comments above as well


Using Kinect v2 jointOrientations along with Three.js skinnedMesh
https://social.msdn.microsoft.com/Forums/SECURITY/en-US/3f9e03b4-2670-41b5-9a91-2b72c77fe843/using-kinect-v2-jointorientations-along-with-threejs-skinnedmesh?forum=kinectv2sdk


https://www.openprocessing.org/sketch/607042


https://www.openprocessing.org/sketch/629151


image


fullik
http://lo-th.github.io/fullik/#3D_demo_0

Github


THREE.IK
https://jsantell.github.io/THREE.IK/
https://jsantell.github.io/THREE.IK/examples/#multi-effector

Github


matter.js
https://brm.io/matter-js/demo/#chains

Github


Analytic Two-Bone IK in 2D
Article
http://www.ryanjuckett.com/programming/analytic-two-bone-ik-in-2d/

Codepen
https://codepen.io/ge1doot/pres/zGywYw


jsfiddle
https://jsfiddle.net/satori99/pay0oqcd/


References

4 Likes