threejs 调用blendshape

在 Three.js 中使用 BlendShapes，需要先创建一个带有 BlendShapes 的模型，然后使用 Three.js 中的 MorphTarget 和 MorphTargetInfluences 来控制 BlendShapes。具体步骤如下：

1. 加载带有 BlendShapes 的模型。

const loader = new THREE.GLTFLoader();
loader.load('model.gltf', (gltf) => {
  const mesh = gltf.scene.children[0];
  scene.add(mesh);
});

2. 创建 MorphTargetInfluences 数组，并将其赋值给模型的 morphTargetInfluences 属性。

const morphTargetInfluences = [];
for (let i = 0; i < mesh.geometry.morphTargets.length; i++) {
  morphTargetInfluences[i] = 0;
}
mesh.morphTargetInfluences = morphTargetInfluences;

3. 使用 Three.js 中的 AnimationMixer 来播放动画，并在动画更新时，更新 MorphTargetInfluences 数组。

const mixer = new THREE.AnimationMixer(mesh);
const action = mixer.clipAction(gltf.animations[0]);
action.play();

function update() {
  const delta = clock.getDelta();
  mixer.update(delta);

  // 更新 MorphTargetInfluences 数组
  for (let i = 0; i < mesh.geometry.morphTargets.length; i++) {
    morphTargetInfluences[i] = mesh.morphTargetInfluences[i];
  }
}

4. 控制 BlendShapes。

// 控制第一个 BlendShape
mesh.morphTargetInfluences[0] = 1;

注意：在使用 BlendShapes 时，模型的顶点数量必须相同，且顶点的顺序必须相同。