Javascript Library
Use Wiggle Bones in the browser. Learn how to install and set up Three.js library.

Install using your favourite package manager:

$ yarn add wiggle

# or

$ npm install --save wiggle

Here's the most basic example using the class WiggleBone:

import * as THREE from "three";
import { WiggleBone } from "wiggle";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

const loader = new GLTFLoader();

loader.load("/model.gltf", ({ scene }) => {
  const mesh = scene.getObjectByName("SkinnedMesh");
  let rootBone;
  const wiggleBones = [];

  mesh.skeleton.bones.forEach((bone) => {
    if (!bone.parent.isBone) {
      rootBone = bone;
    } else {
      const wiggleBone = WiggleBone(bone, {
        velocity: 0.5,
      });
      wiggleBones.push(wiggleBone);
    }
  });

  const tick = (ms) => {
    rootBone.position.x = Math.sin(ms);
    wiggleBones.forEach((wiggleBone) => {
      wiggleBone.update();
    });
    requestAnimationFrame(tick);
  };
  tick();
});

Here you can find a fully working demo:

Working Demo
Codesandbox repo

Alternatively, you can use the utility class WiggleRig. This works pretty well in a Blender → GLTF → Three.js workflow.

Supported by