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();
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 자바스크립트 배열 순회 (array loop) (0) | 2018.09.06 |
|---|---|
| WebPack 빌드 및 사용하기 (2) | 2018.08.21 |
| 자바스크립트 모바일 브라우저 감지하기 (0) | 2018.07.17 |
| 스파인 애니메이션 재생 문제 (Spine Animation) (0) | 2018.07.13 |
| Threejs repeat (0) | 2018.07.04 |