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
@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.
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?
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 
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 raycaster - drag and drop
Note! The coordinates are stored in the local storage of the browser.
More complicated examples
Recaster MultiMaterial
modify Geo
A problem with multi material was solved by @Mugen87: [SOLVED] Raycaster - MultiMaterial
Have fun doing it. 
2 Likes
The mmd format of THREE has an actual IK solver
3 Likes
I’ve totally overlooked that file 
: three.js/CCDIKSolver.js at dev · mrdoob/three.js · GitHub
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
- https://threejs.org/docs/#examples/zh/animations/CCDIKSolver
- https://github.com/mrdoob/three.js/blob/4930ea1ff67f0a349b9fa5b225a21069703bb7c9/examples/js/animation/CCDIKSolver.js
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
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
8 Likes