three.js之初探骨骼动画

//这是生成蒙皮网格的主方法
initBones() {
		//下面是一些会用到的参数
    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
    };

    var geometry = this.createGeometry( sizing ); //这是生成几何体的方法，主要是根据顶点生成对应的skinIndex和skinWeight属性
    var bones = this.createBones( sizing ); //这是生成骨骼的方法
    mesh = this.createMesh( geometry, bones ); //这是生成蒙皮网格的方法

    mesh.scale.multiplyScalar( 1 );
    scene.add( mesh );

    this.render();
    document.getElementById("loading").style.display = "none";  
},

createGeometry(sizing) {
		//创建一个圆柱体
    var geometry = new THREE.CylinderBufferGeometry(
        5, // 上面半径
        5, // 下面半径
        sizing.height, // 总高度
        8, // 圆形面分段数
        sizing.segmentCount * 3, // 沿高度的分段数4*3
        true // 无上下面
    );

    var position = geometry.attributes.position; //圆柱体顶点位置集合

    var vertex = new THREE.Vector3(); //创建一个三维向量用于保存顶点坐标

    var skinIndices = []; //顶点索引聚合
    var skinWeights = []; //顶点权重聚合

    for ( var i = 0; i < position.count; i ++ ) { //遍历顶点

        vertex.fromBufferAttribute( position, i ); //依次取出每个点

        var y = ( vertex.y + sizing.halfHeight ); //y保存相对于圆柱体底面的高度值。

				//这两行比较重要
        var skinIndex = Math.floor( y / sizing.segmentHeight ); //高度除以总高度在向下取整，得到当前的skinIndex
        var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight; //当前的y值占该段的百分比

        skinIndices.push( skinIndex, skinIndex + 1, 0, 0 ); //该点关联bone[skinIndex]和bone[skinIndex+1]
        skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 ); //关联bone[skinIndex]的比重为1 - skinWeight，关联bone[skinIndex+1]的比重为skinWeight。
				//举个例子，第一个y值刚好为0。那么skinIndex为0，skinWeight也为0。所以呢该点相关的骨骼索引为0和1，权重分别是1和0，也就是该点只与bone[0]有关。
				//再比如y值为4，那么skinIndex为0，skinWeight也为0.5，所以呢该点相关的骨骼索引为0和1，权重分别是0.5和0.5，也就是该点与bone[0]和bone[1]都相关。其实也很容易理解，因为4恰好在该分段的中间，所以决定于两个骨骼点的状态。

    }

    geometry.setAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) ); //几何体中添加skinIndex属性
    geometry.setAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) ); //几何体中添加skinWeight属性

    return geometry;
},

createBones(sizing) {
    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; //再将当前骨骼赋值给根骨骼

    }
    return bones;
},

createMesh(geometry, bones) {
		//创建一个带蒙皮的材质
    var material = new THREE.MeshPhongMaterial( {
        skinning: true, //重点
        color: 0x156289,
        emissive: 0x072534,
        side: THREE.DoubleSide,
        flatShading: true
    } );

    var mesh = new THREE.SkinnedMesh( geometry,	material ); //创建蒙皮网格
    var skeleton = new THREE.Skeleton( bones ); //创建骨架

    mesh.add( bones[ 0 ] ); //网格添加根骨骼节点（此例bones[0]为根节点）

    mesh.bind( skeleton ); //网格绑定骨架

    skeletonHelper = new THREE.SkeletonHelper( mesh ); //创建骨骼显示助手
    skeletonHelper.material.linewidth = 2;
    scene.add( skeletonHelper );

    return mesh;
},