diff --git a/CG Tutorial/README.md b/CG Tutorial/README.md
index 896bf45b78645a07156385be7d05087c240db47b..4211fb2f477388d0ed0b801b72a419f204576cb8 100644
--- a/CG Tutorial/README.md
+++ b/CG Tutorial/README.md
@@ -1,6 +1,6 @@
# 컴퓨터 그래픽스 기말과제
-## 프로젝트 설명
+1. ## 프로젝트 설명
---
@@ -12,26 +12,33 @@
> > \*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 코드
-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";
+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";
//기본 Canvas 크기를 고정해놨습니다.
const c_h_scr = 500;
@@ -176,6 +183,7 @@ DancingModel.visible = true;
}
animate();
+<code>
추가 설명
OrbitControl은 사용자가 모델을 보기 쉽게 하기 위한 라이브러리로, target point를 기준으로 시점을 회전할 수 있다. 또한 우클릭으로 시점을 이동, 마우스 휠로 확대 및 축소를 할 수 있다.