three 蒙皮动画核心过程

简介：

  蒙皮动画：通过模拟人的运动来模拟3D物体的动画，游戏中也经常使用。

制作蒙皮动画的主要过程和注意点：

1.  制作蒙皮骨骼： 

       var material = new THREE.MeshBasicMaterial({color: 0xfff000,wireframe:true,skinning : true});
       mesh = new THREE.SkinnedMesh(geometry,material);

       mesh.position.y = 15;

      注意这里的material中的   skinning: true  必须设置为true，否则蒙皮骨骼不随骨骼运动。

2. 制作骨头：

        var bones =[];
        var arm = new THREE.Bone();
        arm.position.y = - 15;
        bones.push(arm);


       for(var i = 0 ;i<3;i++){
           var bone = new THREE.Bone();
           bone.position.y = 10;
           arm.add(bone);
           arm = bone;
           bones.push(bone);

       }

    注意：这里的思路是先创建一个骨头arm ，然后循环创建n块骨头，分别添加到前一块骨头里。也就是 bone[0] 添加到arm中，bone[1] 添加到bone[0]中，最终实现一个骨头以此连接的整体骨头arm，后面用到。

 注意2：骨头arm添加到mesh中的起始位置在mesh的中心点，所以这里可以设置position.y = - mesh的高度的一半，其他bone的位置以次相对添加它的bone。

3.制作骨架：

var skeleton = new THREE.Skeleton(bones);

4.mesh添加骨头并且骨架附体：

<