骨骼动画

骨骼是什么？骨骼就是一个可以控制其它形状的对象。在threejs中，骨骼（Bone）就是一个空的Object3D对象，当然，也可以是任何Object3D对象的子类。

创建骨架

创建骨架总体来说就四步：

• 创建形状
• 创建骨架
• 为形状的每一个点指定其控制的骨骼
• 将形状和骨架中的骨骼绑定起来

往往第三步是最复杂的，因为要考虑形状的每一个点。下面是一个完整的例子,在这个例子中，是使用点的y值来划分哪个点属于哪根骨骼管的：

function createBones(){

       **//计算参数，这些参数在多处用到**

        var segmentHeight = 8;

        var segmentCount = 4;

        var height = segmentHeight * segmentCount;

        var halfHeight = height * 0.5;

        var sizing = {

                segmentHeight : segmentHeight,

                segmentCount : segmentCount,

                height : height,

                halfHeight : halfHeight

        };

        **//创建骨架**

        bones = [];

        var prevBone = new THREE.Bone();

        bones.push( prevBone );

        prevBone.position.y = - sizing.halfHeight;

        for ( var i = 0; i < sizing.segmentCount; i ++ ) {

                var bone = new THREE.Bone();

                bone.position.y = sizing.segmentHeight;

                bones.push( bone );

                prevBone.add( bone );

                prevBone = bone;

        }

        skeleton = new THREE.Skeleton( bones );

        **//创建形状**

        var geometry = new THREE.CylinderGeometry(

                5,                       **// radiusTop**

                5,                       **// radiusBottom**

                sizing.height,           **// height**

                8,                       **// radiusSegments**

                sizing.segmentCount * 3, **// heightSegments**

                true                     **// openEnded**

        );

        **//将形状的每个点和骨骼建立关联，其中skinIndices指定该点由哪些骨骼控制（通过骨骼序号指定），skinWeights指定这些骨骼对该点的控制能力**

        for ( var i = 0; i < geometry.vertices.length; i ++ ) {

                var vertex = geometry.vertices[ i ];

                var y = ( vertex.y + sizing.halfHeight );

                var skinIndex = Math.floor( y / sizing.segmentHeight );

                var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;

                geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );

                geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );

        }

        var material = new THREE.MeshPhongMaterial( {

                skinning : true,

                color: 0x156289,

                emissive: 0xa72534,

                side: THREE.DoubleSide,

                shading: THREE.FlatShading,

                wireframe:true

        } );

        mesh = new THREE.SkinnedMesh( geometry,material );

        **//绑定骨架和网格，任务完成**

        mesh.add( bones[ 0 ] );

        mesh.bind( skeleton );

        mesh.scale.multiplyScalar( 1 );

        scene.add( mesh );

        **//SkeletonHelper可以用线显示出骨架，帮助我们调试骨架，可有可无**

        skeletonHelper = new THREE.SkeletonHelper( mesh );

        skeletonHelper.material.linewidth = 2;

        scene.add( skeletonHelper );

}

值得一说的是skinIndices和skinWeights属性，这两个属性来自Geometry类。

skinIndices是一个数组，用来指出当前点受哪些骨骼控制，在threejs中，一个点最多可以受4根骨头控制，所以skinIndices是一个Vector4数组。

skinWeights也是一个Vector4数组，其中的数据和skinIndices数组一一对应，用来指示对应的骨骼影响该点的比重。

比如：

geometry.skinIndices[3] = new THREE.Vector4(1,2,3,0);  

geometry.skinWeights[3] = new THREE.Vector4(0.6,0.3,0.1,0);

上面的代码表示，geometry的第四个点受序号为1,2,3的三根骨骼控制，控制的比重分别是0.6，0.3，0.1。序号为0的骨骼由于控制比重为0，即这个点不受这根骨骼控制。

更新骨架

直接控制每个骨骼的运动，就能控制整个骨骼图形的运动：

angle = 0;

function render(){

    requestAnimationFrame(render);

        angle += 0.1;

        angle = angle%60;

        mesh.skeleton.bones[ 3 ].rotation.z  = angle/180*Math.PI;

        mesh.skeleton.bones[ 1 ].rotation.z  = -angle/180*Math.PI;

        skeletonHelper.update();

    renderer.render(scene,camera);

}

完整例子

threejs骨架动画简单例子

最新的threeJS demo

https://threejs.org/docs/scenes/bones-browser.html