wordpress 不能发送邮件,seo优化推广公司,php页面 wordpress,云服务器能放网站吗骨骼动画
骨骼是什么#xff1f;骨骼就是一个可以控制其它形状的对象。在threejs中#xff0c;骨骼#xff08;Bone#xff09;就是一个空的Object3D对象#xff0c;当然#xff0c;也可以是任何Object3D对象的子类。
创建骨架
创建骨架总体来说就四步#xff1a;
创…骨骼动画
骨骼是什么骨骼就是一个可以控制其它形状的对象。在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.60.30.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骨架动画简单例子 【持续更新点这里】
