> > \*FBX 파일이 import 되어 있어야 하기 때문에 source 폴더를 local에 다운 받아야 합니다.
## FBX 파일이란?
---
FBX 확장자는 모든 Autodesk Digital Entertainment Creation 제품에서 사용되는 파일 확장자이다. 이 회사의 유명한 3D 툴로는 3ds Max, Maya 등이 있다. 또한 OBJ 확장자 파일 보다 model, uv data, joint, animation, texture 파일 등 더 많은 정보를 함께 저장한 파일이다. 즉, animation을 저장하기 때문에 파일의 용량이 크다. 이렇게 사용자가 필요한 파일로 export 하는 것이 유용한데 만약 다른 정보가 필요 없다면 OBJ 파일로 export 하는 것이 좋다.
2. ## FBX 파일이란?
FBXLoader 사용하기
먼저 FBXLoader을 사용하기 위해서는 아래와 같은 코드로 import 해주어야 한다.
import { FBXLoader } from "https://unpkg.com/three@0.126.1/examples/jsm/loaders/FBXLoader";
> FBX 확장자는 모든 Autodesk Digital Entertainment Creation 제품에서 사용되는 파일 확장자이다. 이 회사의 유명한 3D 툴로는 3ds Max, Maya 등이 있다. 또한 OBJ 확장자 파일 보다 model, uv data, joint, animation, texture 파일 등 더 많은 정보를 함께 저장한 파일이다. 즉, animation을 저장하기 때문에 파일의 용량이 크다. 이렇게 사용자가 필요한 파일로 export 하는 것이 유용한데 만약 다른 정보가 필요 없다면 OBJ 파일로 export 하는 것이 좋다.
이 때, 수업시간에서 html 파일에 script로 각 js 파일을 불러왔다면 여기에 type=’module’을 추가해야 한다. 이렇게 하면 파일을 불러오는 것은 쉽다.
let fbxLoader = new FBXLoader();
위와 같은 코드로 FBXLoader을 생성하고, 여기에
fbxLoader.load("./source/benz.fbx", function (object) {
scene.add(object);
});
위와 같은 코드로 load를 할 수 있다.
---
전체 three.js 코드
3. ## FBXLoader 사용하기
> 먼저 FBXLoader을 사용하기 위해서는 아래와 같은 코드로 import 해주어야 한다.
>
> > import { FBXLoader } from "https://unpkg.com/three@0.126.1/examples/jsm/loaders/FBXLoader";
> 이 때, 수업시간에서 html 파일에 script로 각 js 파일을 불러왔다면 여기에 type=’module’을 추가해야 한다. 이렇게 하면 파일을 불러오는 것은 쉽다.
>
> > let fbxLoader = new FBXLoader();
> > 위와 같은 코드로 FBXLoader을 생성하고, 여기에
> > fbxLoader.load("./source/benz.fbx", function (object) {
> > scene.add(object);
> > });
> > 위와 같은 코드로 load를 할 수 있다.
4. ## 전체 three.js 코드
<pre>
import \* as THREE from "https://unpkg.com/three@0.126.1/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js";
import { FBXLoader } from "https://unpkg.com/three@0.126.1/examples/jsm/loaders/FBXLoader";
...
...
@@ -176,6 +183,7 @@ DancingModel.visible = true;
}
animate();
<code>
추가 설명
OrbitControl은 사용자가 모델을 보기 쉽게 하기 위한 라이브러리로, target point를 기준으로 시점을 회전할 수 있다. 또한 우클릭으로 시점을 이동, 마우스 휠로 확대 및 축소를 할 수 있다.
