将骨架应用于程序蒙皮网格

时间:2017-07-16 23:10:10

标签: javascript animation three.js

this fiddle中我试图根据threejs.org/docs/scenes/bones-browser上的基本骨骼示例创建一个程序蠕虫(或蛇或毛毛虫)角色,但还有四个骨头和眼睛的两个球体加上;这里显示的添加/更改的代码......

function eyeBall(){

[2]

function createBones(sizing){

function eyeBall(  ) {

    var faceIndices = [ 'a', 'b', 'c' ];
    var color, f, i, j, p, vertexIndex, radius = 1;
    var geometry  = new THREE.SphereGeometry( radius, 18, 5 );

    for ( i = 0; i < geometry.faces.length; i ++ ) {
        f  = geometry.faces[ i ];
        for( j = 0; j < 3; j++ ) {
            vertexIndex = f[ faceIndices[ j ] ];
            p = geometry.vertices[ vertexIndex ];
            f.color = new THREE.Color( 0xffffff );
            if( p.y < -0.9 ) { 
                f.color = new THREE.Color( 0x000000 );
            }
        }
    }
    return geometry;
}

函数initBones(){

function createBones ( sizing ) {

    bones = [];

    var prevBone = new THREE.Bone();
    bones.push( prevBone );
    prevBone.position.z = - sizing.halfLength;

    for ( var i = 0; i < sizing.segmentCount; i ++ ) {

        var bone = new THREE.Bone();
        bone.position.z = sizing.segmentLength;
        bones.push( bone );
        prevBone.add( bone );
        prevBone = bone;
    }

    //add more bones
    var lHdBone = new THREE.Bone();
        lHdBone.position.set( 1.4, 0, 2.8 );
        lHdBone.name = 'lHdBone';
        bones.push( lHdBone );
        prevBone.add( lHdBone );

    var rHdBone = new THREE.Bone();
        rHdBone.position.set( -1.4, 0, 2.8 );
        rHdBone.name = 'rHdBone';
        bones.push( rHdBone );
        prevBone.add( rHdBone );

    var lEyeBone = new THREE.Bone();
        lEyeBone.position.set( 0, 0, 1 );
        lEyeBone.name = 'lEyeBone';
        bones.push( lEyeBone );
        lHdBone.add( lEyeBone );

    var rEyeBone = new THREE.Bone();
        rEyeBone.position.set( 0, 0, 1 );
        rEyeBone.name = 'rEyeBone';
        bones.push( rEyeBone );
        rHdBone.add( rEyeBone );

    return bones;
}

小提琴中的动画将球体移动到相同的大致方向,但球体显然没有按照需要与骨骼相连。眼睛应该向前看。我没有找到任何类似的问题,因为大多数建模是在Blender中完成的,但我确信这应该只能在three.js中完成。 我觉得我错过了一些简单的东西!

带有合并几何的

This is another fiddle。现在一只眼睛似乎行动正确,但另一只眼睛显然是儿童骨骼;即骨骼[6]是骨骼的孩子[5],而他们都应该是骨头的孩子[4]。

0 个答案:

没有答案