three.js 骨骼动画

以下是使用three.js创建和加载具有骨骼动画的骨骼网格模型SkinnedMesh的示例代码：

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建骨骼动画模型
var loader = new THREE.JSONLoader();
loader.load('model.json', function(geometry, materials) {
  var material = new THREE.MeshFaceMaterial(materials);
  var mesh = new THREE.SkinnedMesh(geometry, material);
  
  // 创建骨骼动画控制器
  var mixer = new THREE.AnimationMixer(mesh);
  var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', geometry.morphTargets, 30);
  var action = mixer.clipAction(clip);
  action.play();
  
  // 将骨骼动画模型添加到场景中
  scene.add(mesh);
  
  // 渲染循环
  function animate() {
    requestAnimationFrame(animate);
    
    // 更新骨骼动画控制器
    mixer.update(0.01);
    
    // 渲染场景
    renderer.render(scene, camera);
  }
  
  animate();
});

这段代码首先创建了一个场景、相机和渲染器。然后使用`JSONLoader`加载包含骨骼动画数据的模型文件（例如`model.json`）。加载完成后，创建一个`SkinnedMesh`对象，并将其添加到场景中。接着创建一个`AnimationMixer`对象，并使用`AnimationClip`创建一个动画剪辑。将动画剪辑添加到骨骼动画控制器中，并播放动画。最后，在渲染循环中更新骨骼动画控制器并渲染场景。