骨骼动画

骨骼是什么？骨骼就是一个可以控制其它形状的对象。在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, // radiusTop5, // radiusBottomsizing.height, // height8, // radiusSegmentssizing.segmentCount * 3, // heightSegmentstrue // 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骨架形状的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。