骨骼動(dòng)畫

骨骼是什么？骨骼就是一個(gè)可以控制其它形狀的對象。在threejs中，骨骼（Bone）就是一個(gè)空的Object3D對象，當(dāng)然，也可以是任何Object3D對象的子類。

創(chuàng)建骨架

創(chuàng)建骨架總體來說就四步：

• 創(chuàng)建形狀
• 創(chuàng)建骨架
• 為形狀的每一個(gè)點(diǎn)指定其控制的骨骼
• 將形狀和骨架中的骨骼綁定起來

往往第三步是最復(fù)雜的，因?yàn)橐紤]形狀的每一個(gè)點(diǎn)。下面是一個(gè)完整的例子,在這個(gè)例子中，是使用點(diǎn)的y值來劃分哪個(gè)點(diǎn)屬于哪根骨骼管的：

function createBones(){//計(jì)算參數(shù)，這些參數(shù)在多處用到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};//創(chuàng)建骨架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 );//創(chuàng)建形狀var geometry = new THREE.CylinderGeometry(5, // radiusTop5, // radiusBottomsizing.height, // height8, // radiusSegmentssizing.segmentCount * 3, // heightSegmentstrue // openEnded);//將形狀的每個(gè)點(diǎn)和骨骼建立關(guān)聯(lián)，其中skinIndices指定該點(diǎn)由哪些骨骼控制（通過骨骼序號指定），skinWeights指定這些骨骼對該點(diǎn)的控制能力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 );//綁定骨架和網(wǎng)格，任務(wù)完成mesh.add( bones[ 0 ] );mesh.bind( skeleton );mesh.scale.multiplyScalar( 1 );scene.add( mesh );//SkeletonHelper可以用線顯示出骨架，幫助我們調(diào)試骨架，可有可無skeletonHelper = new THREE.SkeletonHelper( mesh );skeletonHelper.material.linewidth = 2;scene.add( skeletonHelper ); }

值得一說的是skinIndices和skinWeights屬性，這兩個(gè)屬性來自Geometry類。
skinIndices是一個(gè)數(shù)組，用來指出當(dāng)前點(diǎn)受哪些骨骼控制，在threejs中，一個(gè)點(diǎn)最多可以受4根骨頭控制，所以skinIndices是一個(gè)Vector4數(shù)組。
skinWeights也是一個(gè)Vector4數(shù)組，其中的數(shù)據(jù)和skinIndices數(shù)組一一對應(yīng)，用來指示對應(yīng)的骨骼影響該點(diǎn)的比重。
比如：

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

上面的代碼表示，geometry的第四個(gè)點(diǎn)受序號為1,2,3的三根骨骼控制，控制的比重分別是0.6，0.3，0.1。序號為0的骨骼由于控制比重為0，即這個(gè)點(diǎn)不受這根骨骼控制。

更新骨架

直接控制每個(gè)骨骼的運(yùn)動(dòng)，就能控制整個(gè)骨骼圖形的運(yùn)動(dòng)：

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骨架動(dòng)畫簡單例子

---

【持續(xù)更新點(diǎn)這里】

總結(jié)

以上是生活随笔為你收集整理的threejs骨架形状的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。