threejs fbx模型调用blendshape

要在 Three.js 中加载带有 BlendShapes 的 FBX 模型并播放 BlendShapes，可以使用 Three.js 中的 FBXLoader。下面是一些简单的步骤：

1. 下载并导入 FBXLoader 库。

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

2. 使用 FBXLoader 加载 FBX 模型。

const loader = new FBXLoader();
loader.load('model.fbx', function (object) {
  // 处理模型
});

3. 在处理模型之前，需要设置 object 的 geometry.morphTargets 属性。

object.traverse(function (child) {
  if (child.isMesh) {
    child.geometry.morphTargets = object.animations[0].morphTargets;
  }
});

4. 创建 AnimationMixer 对象并将模型添加到该对象中。

const mixer = new THREE.AnimationMixer(object);

5. 播放 BlendShapes。

const action = mixer.clipAction(object.animations[0]);
action.timeScale = 1;
action.play();

6. 更新模型。

function update() {
  mixer.update(deltaTime);
}

这里是完整的示例代码：

import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

let mixer;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new FBXLoader();
loader.load('model.fbx', function (object) {
  object.traverse(function (child) {
    if (child.isMesh) {
      child.geometry.morphTargets = object.animations[0].morphTargets;
    }
  });
  object.scale.set(0.05, 0.05, 0.05);
  scene.add(object);

  mixer = new THREE.AnimationMixer(object);
  const action = mixer.clipAction(object.animations[0]);
  action.timeScale = 1;
  action.play();
});

const animate = function () {
  requestAnimationFrame(animate);
  if (mixer) {
    mixer.update(0.01);
  }
  renderer.render(scene, camera);
};

animate();

希望这可以帮助你在 Three.js 中使用 FBX 模型的 BlendShapes。