Three.js - 使用骨骼和蒙皮 SkinnedMesh 制作动画

最新推荐文章于 2025-03-22 22:12:27 发布

「已注销」

最新推荐文章于 2025-03-22 22:12:27 发布

阅读量2.4k

点赞数

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/ithanmang/article/details/82387014

版权

本文介绍了如何使用Three.js库中的骨骼和蒙皮(SkinnedMesh)技术制作动画。首先展示了包含骨骼的手部模型示例，接着详细解释了实现步骤，包括加载模型、创建骨骼网格，并利用补间动画动态改变顶点位置以实现动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变形动画非常简单，知道所有顶点的位置，然后将每个顶点从一个位置迁移到下一个位置即可。
骨骼和蒙皮则比较复杂，使用骨骼来做动画时，移动一下骨骼需要迁移附着在骨骼上的皮肤以及一些列的顶点的变动。

1、示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180904/04-bones-manually.html
效果
这里写图片描述
这是一个手的模型，文件中带有骨骼bones，顶点和面的定义。

2、实现步骤

#####2.1、加载模型并创建骨骼网格

let loader= new THREE.JSONLoader();
loader.load('../../models/json/hand-1.json', function (geometry) {
   

    let material = new THREE.MeshNormalMaterial({
   skinning: true});
    // 创建骨骼变形网格
    mesh = new THREE.SkinnedMesh(geometry, material);
    mesh.scale.set(10, 10, 10);

    scene.add(mesh);
 }

注意：需要把模型材质的skinning属性设置为true。

2.2、创建补间动画

通过补间动画来动态修改顶点的位置

/* 初始化补间动画 */
function initTween() {
   

    let callback = function () {
   

        let pos = this.pos;

        // 旋转手指
        mesh.skeleton.bones[5].rotation.set(0, 0, pos);
        mesh.skeleton.bones[6].rotation.set(0, 0, pos);
        mesh.skeleton.bones[10].rotation.set(0, 0, pos);
        mesh.skeleton.bones[11].rotation.set(0, 0, pos);
        mesh.skeleton.bones[15].rotation.set(0, 0, pos);
        mesh.skeleton.bones[16].rotation.set(0, 0, pos);
        mesh.skeleton.bones[20].rotation.set(0, 0, pos);
        mesh.skeleton.bones[21].rotation.set(0, 0, pos);

        // 旋转手腕
        mesh.skeleton.bones[1].rotation.set(pos, 0, 0);
    };

    tween = new TWEEN.Tween({
   pos: -

最低0.47元/天解锁文章