Wiggle
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:
Alternatively, you can use the utility class WiggleRig. This works pretty well in a Blender → GLTF → Three.js workflow.