threejs骨架形狀

骨骼動畫

骨骼是什麼？骨骼就是一個可以控制其它形狀的對象。在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骨架動畫簡單例子

---

【持續更新點這裏】