[WebGL/ThreeJS] COLLADA(dae) Loader

WebGL의 ThreeJS 프레임워크에서 3D 지오메트리 포맷인 COLLADA를 로딩하는 방법에 대하여 알아보도록 하겠습니다.

COLLADA 포맷은 3D 지오메트리 정보를 표현하는 포맷 중 하나이며, .dae 확장자명으로 XML 태그 형식으로 정의됩니다. 시중의 거의 대부분의 3D 저작도구는 COLLADA 포맷 익스포트(export)를 지원한다. COLLADA 포맷에는 지오메트리 뿐만아니라 매터리얼과 애니메이션 정보가 포함됩니다.

Step 1 - Export COLLDAD Format

Blender, Maxon CINEMA 4D, Autodesk Maya, Autodesk 3dsMax 등 3D 저작도구에서 지오메트리를 생성합니다. 

만약 텍스쳐를 적용하였다면 가급적 Bake 기능을 활용하여 하나의 전체적인 UV 맵(하나의 이미지)으로 생성하도록 합니다. 해당 지오메트리를 COLLADA 포맷으로 내보내기 합니다.

Tip: COLLADA 포맷은 가급적 1.4 이전 버전으로 내보내도록 합니다. 1.5 이상으로 했더니 ThreeJS의 로더로 잘 불러지지 않습니다. 만약 내보내기 COLLDADA 포맷과 텍스쳐(이미지) 파일의 이름이 변경되거나 경로가 달라지는 경우, 반드시 해당 COLLADA 파일을 열어 이미지 경로를 확인하고 필요 시 수정하도록 합니다.

Step 2 - ColladaLoader.js 파일 인클루드

ColladaLoader.js는 COLLADA 파일을 로딩하기 위하여 반드시 필요한 스크립트 파일입니다. 이 파일은 MrDoob의 Github 사이트에서 다운로드 할 수 있습니다. 다음과 같이 ColladaLoader.js를 HTML 파일에서 로딩한다:

<script src="ColladaLoader.js"></script>

Step 3 - COLLADA 파일 로딩

var dae;
 
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
 
loader.load( {YOUR_COLLADA_FILE}, function ( collada ) {
    dae = collada.scene;
 
    dae.traverse( function ( child ) {
 
        if ( child instanceof THREE.SkinnedMesh ) {
            var animation = new THREE.Animation( child, child.geometry.animation );
            animation.play();
        }
    } );
 
    init();
    animate();
} );




Step 4 - 로딩한 COLLADA 파일 Scene 추가

var scene;
 
...
 
function init() {
    ...
 
    scene = new THREE.Scene();
 
    // Add the COLLADA
    scene.add( dae );
 
    ...
}

이렇게 하면 COLLADA 포맷을 WebGL에서 로딩하여 사용할 수 있습니다.