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

interaction
skeletal-animation

#1

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


#2

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?


#3

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.


#4

Hi!
Have a look at this SO answer


#5

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.


#6

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


#7

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


#8

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.


#9

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:


Procedural animation and skeletons
#10

The mmd format of THREE has an actual IK solver

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


#11

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


#12

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


#13

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.


#14

@Fyrestar Yes, it’s really amazing!!


#15

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


#16

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


#17

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