Bone Attachment

Attach meshes to bones of a skinned mesh, such as attaching a sword to a character's hand.

Technique

Create a BoneChild component that uses useEffect to add a container group to a bone and remove it on cleanup. The bone reference is obtained from the GLTF nodes after loading the model.

Key Concepts

• Access bones from GLTF nodes (e.g., nodes.HandR)
• Use bone.add(container) to parent objects to bones
• Clean up with bone.remove(container) in useEffect cleanup
• Apply position/rotation/scale offsets to adjust attachment placement

Usage

const { nodes } = useGLTF('/character.glb')

<BoneChild bone={nodes.HandR} position={[0, 0.3, 2]} rotation={[0, 0, 0]}>
  <mesh>
    <boxGeometry />
    <meshBasicMaterial color="red" />
  </mesh>
</BoneChild>

This skill is part of verekia's r3f-gamedev.