Rigging and animation

I uploaded this in a discord group for three, but seems its a little too complicated for anyone in there. Really hope somone here can help me:

Hello everyone, I’m currently working on a project where I’ve imported a hand model from Blender into Three.js. I’m trying to make different fingers move, but I’m encountering a problem. The problem i’m experiencing is, when trying to rotate fingers on x-axis, they move at different axes also. It appears that the hand’s position in Three.js after importing might be incorrect. but I’m not sure if that’s the issue, this is my first rig.

Video explains it here: https://youtu.be/Z0bEMOgeCQo For instance, the palm bones are not in the right place, and the fingertips are not where they should be. I’ve attached some images to illustrate the issue.

You can also view the problem on my test website: https://mb-viceandvirtue.com/ and review the code here: JS Bin - Collaborative JavaScript Debugging. I’d greatly appreciate any assistance or suggestions you might have! :camera:


In Blender you seem to be adjusting the bone rotation via view, not via axis like you are doing it in code. Most likely is that your bone roll is not properly alligned in Blender. Put the hand in a neutral position and allign the bone rolls in the same degrees on each finger. Thats what it seems to be atleast.

I changed all bone rolls to 0 as well as the radius. So they should be aligned now. It seems like the issue still occurs like so: https://youtu.be/a3ZZ7ycLuk0 or visible on https://mb-viceandvirtue.com/.

This is my .blend file, if you wish to have a look: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

Ok I took a look in your code and model, there may be issues with the model itself. The first thing you can do is apply the rest pose, if you toggle between pose and edit mode, you can see there is a mismatch in bone allignment. To do that, simply go to pose mode, select all bones, then in up left menu, pose and apply rest pose. Next adjust the bone armature locations to the finger tips in edit mode, also adjust the bone roll to more or less match the parent bone. Also think about retopology and normals, 150MB is kinda overkill, this file doesnt even load for me online.

Cheers, I’m having the same issue after updating with your instructions. This is my updated model: WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

PS. This is a dump model I’m using for testing and troubleshooting - I’m gonna retop, texture and probably rerig/weight paint once I have identified and fixed this issue.

Okay. If I understand this correctly, some of the fingers are going off axis yea ? But isnt this how you created the armature, you bones are not quite alligned and your bone roll is also not alligned. Ideally the armature is at the center of the finger model and with the axis rolled in a unified manner. Something like this. Place the armature at model center and roll the axis in the correct spot. Also keep in mind, that in Blender you are rotating your bones in global axis, but it needs to be rotated in local axis, constrained to x rotation, if you want results similar to your code. These should show how crooked the bone placement and roll is.

This is more or less my first rig - at least the first more complicated one. So concepts like bone rolling is completely new to me. I twigged around in blender, and didn’t understand what you meant by aligning bone rolling before now, as I didn’t realize that bones can be twisted as such, hence twisting the angles they rotate on - it makes sense. It seems to have solved my issue, so I can redo this and get it right. Thank you so much for your help:)

Guess I should have mentioned to enable the axis and line line them up. My bad. :slight_smile: