Three.js / [5] Object3D - 기본 개념과 상속

- 본 게시글은 Three.js 홈페이지 및 Three.js and TypeScript 강의를 바탕으로 작성한 글입니다. -

---

Three.js / [4] Panel - Stats & Data GUI

---

오늘은 three.js의 Object 3d에 대해 공부했다!

이전 강에서 계속해서 cube와 scene과 같은 매소드들을 three.js에서 import해와서 사용했었는데

이 three.js의 대부분의 요소들이 Object3D를 기반으로 만들어 져있다.

 

다시말해 three.js에서 제공하는 대부분의 객체에 대한 기본 클래스다.

아래 링크에서 Object3D 클래스에 대한 자세한 내용을 확인할 수 있다.

 

three.js docs

 

Object3D에는 다시 Object3D를 상속시켜 자손을 만들수 있다.

const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))

위와같이 three.js의 Object3D 메소드인 Scene를 활용해서 scene을 만든 후,

add 매소드를 활용해서 새로운 Objcet3D를 만들 수 있는 것이다.

add매소드는 Object3D요소라면 전부 상속되어있기 때문에, 계속해서 부모자식관계를 만들어 나갈 수 있다.

 

이렇게 만들어진 요소들은 자신의 조상, 부모를 기준으로 움직임이 이루어진다.

---

이게 어디 쓰일까 상상해봤다.

예를 들어 유니티나 다른 3D 툴을 사용해 만든 손가락이 있다고 가정해보자.

손이라는 객체에는 손가락들이 있고 각 손가락들에는 마디, 관절 등 다양한 요소들이 있다.

이때 이 손부터 시작해서 마지막 손 마디까지는 부모 자식 관계다.

 

그리고 이 움직임을 나누어 나타낼때 상속의 진가가 나타난다.

 

예를 들어 손을 흔들면 최고 부모인 손이 흔들리게되면서 자식인 손가락도 같이 위치가 이동하게 된다.

하지만 무언가를 집는다것을 상상할때는 엄지와 검지만을 사용하게 되는데,

이때는 특정 자식들만 움직여야하는 상황이 발생하는데, 이때 상속이 제역할을 해주어

필요한 것들만 유동적으로 움직일 수 있게끔 해주겠구나 하는 상상을 했다.

 

이 부분에서는 실제로 코드를 짜서 만드는것보다는,

만약 3d 모델이 들어왔을때 상속을 어떤 개념으로 사용해야하는지를 이해하는게 중요하다 생각이 들어

크게 코드의 내용은 없당.

 

이상