Three.js中能否基于模型部件拆分动画并单独控制头部动画？

完全可以在Three.js中实现你的需求，无需修改Blender中的动画文件，以下是具体实现步骤：

1. 加载GLTF模型与动画 #

使用GLTFLoader加载模型，通过AnimationMixer管理所有动画：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const clock = new THREE.Clock();
let mixer;
let headBone = null;
let isHeadLocked = false;
const headPosition = new THREE.Vector3();
const headQuaternion = new THREE.Quaternion();
const headScale = new THREE.Vector3();

const loader = new GLTFLoader();
loader.load('your-model.gltf', (gltf) => {
  const model = gltf.scene;
  scene.add(model);
  
  // 初始化动画混合器
  mixer = new THREE.AnimationMixer(model);
  // 创建所有动画动作并播放
  const actions = gltf.animations.map(clip => mixer.clipAction(clip));
  actions.forEach(action => action.play());
  
  // 定位头部骨骼（根据模型实际骨骼名调整判断条件）
  model.traverse((node) => {
    if (node.isBone && (node.name === 'Head' || node.name.includes('mixamorigHead'))) {
      headBone = node;
    }
  });
});

2. 控制头部动画的启停 #

方法一：锁定头部骨骼状态 #

适合新手，逻辑简单直接：停止头部动画时保存当前骨骼状态，每一帧强制恢复该状态；恢复时解除锁定，让动画自然接管。

// 保存头部当前状态
function saveHeadState() {
  if (headBone) {
    headPosition.copy(headBone.position);
    headQuaternion.copy(headBone.quaternion);
    headScale.copy(headBone.scale);
  }
}

// 切换头部动画启停
function toggleHeadAnimation() {
  isHeadLocked = !isHeadLocked;
  if (isHeadLocked) saveHeadState();
}

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  
  if (mixer) mixer.update(clock.getDelta());
  
  // 锁定头部时强制恢复状态
  if (isHeadLocked && headBone) {
    headBone.position.copy(headPosition);
    headBone.quaternion.copy(headQuaternion);
    headBone.scale.copy(headScale);
  }
  
  renderer.render(scene, camera);
}
animate();

你可以通过按钮点击等事件调用toggleHeadAnimation()来控制头部动画。

方法二：精准控制动画轨道 #

如果动画剪辑中包含头部的独立动画轨道，可以直接启用/禁用对应轨道，这种方式更灵活：

// 遍历所有动画动作，找到头部相关轨道
actions.forEach(action => {
  action.clip.tracks.forEach(track => {
    // 轨道命名通常为「骨骼名.属性」，比如 "mixamorigHead.rotation"
    if (track.name.includes('Head')) {
      // 禁用头部轨道：track.enabled = false;
      // 启用头部轨道：track.enabled = true;
    }
  });
});

需要注意不同导出工具的轨道命名规则可能有差异，需根据实际模型调整判断条件。

总结 #

两种方案都无需修改Blender中的动画文件：

• 锁定骨骼状态的方法上手快，适合快速实现需求；
• 控制动画轨道的方式更精准，适合对动画细节有要求的场景。

内容的提问来源于stack exchange，提问作者Mohammed sameer