介绍

Wiggle 是一个 Three.js 库，它使装配的对象能够轻柔地移动并感觉活跃。代码不开源，但是npm包免费下载。

使用

使用您最喜欢的包管理器安装：

$ yarn add wiggle

# or

$ npm install --save wiggle

这是使用 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();
});

在这里您可以找到完整的演示：

https://codesandbox.io/p/devbox/wiggle-bones-for-three-js-example-pv98hd