examples/threejs/002_animation_bvh.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title></head><body>
<script type="module">

//#region IMPORTS
import Starter, { THREE }           from './_lib/Starter.js';

import DynLineMesh                  from './_lib/DynLineMesh.js';
import ShapePointsMesh              from './_lib/ShapePointsMesh.js';

import { Armature, Bone, SkinMTX }  from '../../src/armature/index';
import { Clip, Animator }           from '../../src/animation/index';

import BoneDirMesh2                 from './_lib/BoneDirMesh.js';

import Bvh                          from '../../src/parsers/bvh/index';
//#endregion

//#region MAIN
let App;
let Debug = {};
let Ref = {};

function onRender( dt=0, et=0 ){
    Ref.animator
        .update( dt )
        .applyPose( Ref.pose );

    Ref.pose.updateWorld( true );
    Ref.boneView.updateFromPose( Ref.pose );
}

window.addEventListener( "load", async _=>{
    App = new Starter( { webgl2:true, grid:true } );
    App.setCamera( 0, 20, 4, [0,0.8,0] );
    App.onRender = onRender;

    // App.add( ( Debug.pnt = new ShapePointsMesh() ) );
    // App.add( ( Debug.ln  = new DynLineMesh() ) );

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // Load Animation
    const bvh  = await Bvh.fetch( '../_res/anim/dataset-1_walk_giant_001.bvh' );
    bvh.ignoreRoot = true;

    const anim = bvh.getAnimation();
    const clip = Clip.fromBvh( anim, [0] );

    Ref.animator = new Animator();
    Ref.animator.inPlace         = true;
    Ref.animator.inPlaceScale[2] = 0;

    Ref.animator.setClip( clip );

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // Build Armature
    const arm  = armature_from_bvh( bvh );   // Create an Armature from a GLTF Skeleton
    arm.offset.setScl( [0.01,0.01,0.01] );

    const pose = arm.newPose();
    pose.updateWorld(); // Needed since adding offset scale to the armature.
    Ref.pose = pose;

    //console.log( 'arm bones', arm.bones );

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // VIEW BONES  
    const boneView = new BoneDirMesh2( pose );
    boneView.setBoneScale( 0.1 );
    boneView.updateFromPose( pose );
    App.add( boneView );
    Ref.boneView = boneView;
    
    onRender();
    //console.log( 'pose', pose.bones );

    App.render();
});

function armature_from_bvh( bvh, defaultBoneLen = 0.07 ){
    const arm  = new Armature();
    const skin = bvh.getSkin();

    for( let j of skin.joints ){
        arm.addBone( j.name, j.parentIndex, j.rotation, j.position );
    }

    // Create Bind Pose
    arm.bind( SkinMTX, defaultBoneLen );
    return arm;
}
//#endregion

</script>
</body></html>