Three.js 에서 jd 모델 사용하기.

Three js 에서 애니메이션 재생시 애니메이션 한개마다 FBX 파일을 로드, 처리하는건 불필요하다고 판단되어

3D Max에서 JD 파일로 모델을 애니메이션 정보와 함께 출력했다.

JD 파일을 이용해서 씬에 출력 및 애니메이션을 재생해보자.

JDLoader.min.js

JDLoader 파일을 먼저 index에 추가, 로드 시킨다. (검색해도 찾을수 있음)

jd파일을 json로드한뒤 parse 하면 다양한 정보들이 담겨서 나오는데 해당 데이터를 담아보자.

static jdModel( data )
{
    let meshes = [];
    let mixers = [];
    let actions = [];

    for( let i = 0; i < data.objects.length; ++i )
    {
        if( data.objects[i].type == "Mesh" || data.objects[i].type == "SkinnedMesh" )
        {
            let mesh = null;
            let matArray = this.createMaterials( data );
            if ( data.objects[i].type == "SkinnedMesh")
            {
                mesh = new THREE.SkinnedMesh( data.objects[i].geometry, matArray );
            }
            else
            {
                mesh = new THREE.Mesh( data.objects[i].geometry, matArray );
            }
            meshes.push( mesh );

            if( mesh && mesh.geometry.animations )
            {
                for(let j = 0, length = mesh.geometry.animations.length; j < length; j++)
                {
                    let mixer = new THREE.AnimationMixer( mesh );
                    mixers.push( mixer );
                    let action = mixer.clipAction( mesh.geometry.animations[j] );
                    action.play();
                    actions.push( action );
                }
            }
        }
        else if ( data.objects[i].type == "Line" )
        {
            let jd_color = data.objects[i].jd_object.color;
            let color1 = new THREE.Color( jd_color[0] / 255, jd_color[1] / 255, jd_color[2] / 255 );
            let material = new THREE.LineBasicMaterial({ color: color1 });  //{ color: new THREE.Color( 0xff0000 ) }
            let line = new THREE.Line( data.objects[i].geometry, material );
            // scene.add( line );

            if( line.geometry.animations )
            {
                for( let j = 0, length = mesh.geometry.animations.length; j < length; j++ )
                {
                    let mixer = new THREE.AnimationMixer( line );
                    mixers.push( mixer );
                    let action = mixer.clipAction( line.geometry.animations[j] );
                    action.play();
                    actions.push( actions );
                }
            }
        }
    }

    let object = {};
    object.meshes = meshes;
    object.mixers = mixers;
    object.actions = actions;
    return object;
}

static createMaterials( data )
{
    let matArray = [];
    for( let i = 0; i < data.materials.length; ++i )
    {
        let mat = new THREE.MeshPhongMaterial({});
        mat.copy( data.materials[i] );
        matArray.push( mat );
    }

    return matArray;
}

Static 함수로 처리했다.

기존의 JDModel 로드 방법에 일부 스크립트가 추가되었는데

반환되는 object내부에

meshes , mixers, actions가 담겨서 나오게 된다.

이 함수를 통해 오브젝트를 받은뒤

meshes에 들어있는 모든 오브젝트를 Scene에 등록해준다.

this.object = new THREE.Group();

let model = StaticMethodCall.jdModel( data );
for(let i = 0, length = model.meshes.length; i < length; i++)
    this.object.add( model.meshes[i] );

Group을 하나 만든뒤 씬에 등록하고 그 자식으로 넣어주는 방법이 편하다.

mixer는 애니메이션을 담당하므로 update함수에서 지속적으로 호출한다.

this.mixers[0].update( delta );

애니메이션을 재생, 정지 하고 싶을때는 Actions를 이용한다.

this.actions[1].stop();
this.actions[0].play();