threejs 详细调用blendshape

Three.js 是一个用于在 Web 上渲染 3D 图形的 JavaScript 库。如果你想在 Three.js 中使用 BlendShapes，可以按照以下步骤进行：

1. 定义一个包含 BlendShapes 的模型

首先，你需要一个包含 BlendShapes 的模型。这个模型可以使用任何 3D 建模软件创建，并将其导出为支持的文件格式。在导入模型之前，请确保它包含了 BlendShapes 的信息。

2. 导入模型并创建动画混合器

在 Three.js 中，你需要使用 `GLTFLoader` 导入模型。导入完成后，你需要创建一个 `AnimationMixer` 对象来管理模型的动画。你可以使用以下代码：

const loader = new THREE.GLTFLoader();
loader.load( 'model.gltf', function ( gltf ) {
    const model = gltf.scene;
    const animations = gltf.animations;
    const mixer = new THREE.AnimationMixer( model );
    ...
});

3. 创建混合形状轨道

接下来，你需要创建一些混合形状轨道，可以使用以下代码：

const blendShapes = animations[0].tracks.filter((t) => t.name.startsWith('morphTargetInfluences'));
for (let i = 0; i < blendShapes.length; i++) {
    const track = blendShapes[i];
    mixer.clipAction(animations[0]).setEffectiveWeight(1.0).play();
}

这段代码将创建与 BlendShapes 相关的轨道，并将其添加到 `AnimationMixer` 中。

4. 更新混合形状权重

现在，你可以使用以下代码来更新混合形状的权重：

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

其中，`blendShapeWeights` 是一个数组，包含每个 BlendShape 的权重值。

这就是在 Three.js 中使用 BlendShapes 的基本步骤。当然，还有许多其他的细节需要处理，比如如何在 UI 中控制 BlendShapes 的权重等等。但总体上来说，这就是使用 Three.js 中 BlendShapes 的方式。