Skeleton controlling multiple meshes

Questions
,
1

I’m trying to model & animate a simple object like a shoulder, upper arm, elbow, forearm, wrist. The joints are just spheres, the arms are just cylinders (CylinderGeometry). I want them all parented in the usual way, shoulder → upper arm → elbow → forearm → wrist.
It seems like in three.js “bones” are meant for this: I can create an upperArm and forearm bone, and put those into a Skeleton. My question is how to bind the cylinder and sphere geometries to the skeleton, so when I update the bones (rotations & lengths) the geometries move appropriately? I’ve only seen examples with SkinnedMesh which seems way more complicated than I need.

Alternatively I can skip bones altogether and just create the geometries & meshes and rotate/scale them to perform the animation; then I have to do more of the math myself but maybe it’s simpler. Anyone have any hints on how this is usually done?

2

If a mesh is only influenced by a single bone, then you can make the bone a parent of that mesh. If multiple bones, then SkinnedMesh (and its per-vertex skin index and weights) would be the way to go.

3

As Don hinted, if you’re animating whole meshes, you don’t need SkinnedMesh. You only need that if you intend to animate specific vertices of a Mesh node.

In your case, you do not even need a Skeleton, or any Bones. You can just create an AnimationMixer with animations that match with nodes by name, like this:

In your case, just make sure you match the animations with your node names, f.e. “leftUpperArm”, “rightShoulder”, “Neck”, etc. Don’t make Bones and Skeleton, just name your mesh nodes directly since you want to animate the nodes and not specific vertices. If you do need to animate specific vertices of a single Mesh node, then yeah, you’ll need a Skeleton, and in that case you’re much better off learning how to set that up in Blender, Maya, etc.

But if that’s all you need, you might be better off with a library like Tween.js for animating your nodes:

Tween.js and other tweening libraries are better for hand-written animation because they have more options such as more interpolation/easing curves to pick from, and are easier to use for this use case.

Here’s a much simpler example using Tween.js:

The THREE.AnimationMixer and related classes are more suitable for animation data imported from asset files like GLTF, FBX, etc, which are exported from applications like Blender, Maya, etc, not as convenient for hand-programmed animations.

You could also generate values for the Three.js keyframe tracks as in the first example using Tween.js or other libraries.

Note that for animation of .quaternion (Quaternion objects) you’d want to animate a number from, say, 0 to 1, then map that to a slerp of two quaternions separately, because directly animating the numbers of a quaternion along a path may not make sense.

4

@Mugen87 In my second-to-last example, I set interpolation to InterplateSmooth but the box still seems to move linearly. Is this a bug? Or does the interpolation adjust the path of the values, not the speed (hence it would need more than two sets of positions)? If it is the latter, I’ll make a doc PR to make that clear.