threejs 导入带骨骼的3d模型

Three.js 是一个用于 Web 的 JavaScript 3D 图形库，它允许开发者在浏览器中创建复杂的三维场景。如果你想在 Three.js 中导入带骨骼（skinning）的 3D 模型，通常这种模型包含的是由顶点、面片以及骨骼信息构成的动画角色。以下是基本步骤：

1. **准备模型文件**：你需要一个支持皮肤绑定（Skinning，也称为动画蒙皮）的 3D 文件格式，如 FBX 或 glTF。这些格式包含了模型几何体、纹理以及关节和权重信息。

2. **加载库**：首先在项目中引入 three.js 和可能需要的额外库，比如 `THREE.GLTFLoader` 或者 `THREE.FBXLoader`，它们能处理不同的模型格式。

import * as THREE from 'three';
// 如果使用GLTFLoader
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

3. **创建加载器**：根据模型格式选择适当的加载器，并设置回调函数来处理加载完成后的模型。

const loader = new GLTFLoader();
loader.load('path_to_your_model_with_skins.gltf', function(gltf) {
    // 加载完成后...
});

4. **处理加载的模型**：
- 获取模型的 `skin` 属性，它通常包含关节（bones）、权重（weights）等信息。
- 创建一个 `THREE.Skeleton` 对象，然后将关节信息添加到骨架中。
- 给模型的每个顶点应用骨骼影响，通过 `skin.clampScale = true;` 来防止缩放异常。

const skin = gltf.scene.skins[0];
const skeleton = new THREE.Skeleton(skin.joints, skin.binds);
model.traverse((child) => {
    if (child.isMesh) {
        child.skeleton = skeleton;
        child.updateMatrixWorld(true); // 更新世界矩阵
    }
});

5. **动画控制**：如果你的模型有预设的动画，可以使用 `skeleton` 对象来播放动画。例如，`skeleton.play('animation_name')`。