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.

1 Like

@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:

1 Like

The mmd format of THREE has an actual IK solver

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

2 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".