[WebGL] Three.js - COLLADA(dae) Loader

 

 

 

=================================

=================================

=================================

 

 

 

 

 

출처: http://cinema4dr12.tistory.com/820

[WebGL/ThreeJS] COLLADA(dae) Loader

 

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

COLLADA 포맷은 3D 지오메트리 정보를 표현하는 포맷 중 하나이며, .dae 확장자명으로 XML 태그 형식으로 정의된다.

시중의 거의 대부분의 3D 저작도구는 COLLADA 포맷 익스포트(export)를 지원한다. COLLADA 포맷에는 지오메트리 뿐만아니라 매터리얼과 애니메이션 정보가 포함된다.

 

Step 1 - Export COLLADA 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에서 로딩하여 사용할 수 있다.

 

=================================

=================================

=================================