[three.js journey] 4강 복습: object transform (1)

개요

Scene에 담긴 오브젝트를 변형함으로써 나중에 애니메이션을 구현할 수 있다.

 

변형할 속성에는 4가지가 있는데 position, scale, rotation, quaternion이다.

Object3D 클래스를 갖고 있는 모든 클래스 (예: Camera, Mesh, ... ) 들은 4가지 속성을 전부 가지고 있다.

 

패키지 내부를 살펴보면 Object3D 클래스 내 4가지 속성과 이를 상속 받고 있는 클래스들을 볼 수 있다.

Object3D 생성자 내부 4가지 속성

왼쪽: Object3D를 상속받는 Camera 오른쪽: Object3D를 상속받는 Mesh

---

아래 박스와 AxesHelper를 가지고 오브젝트 변형을 실험해보자.

왼쪽: 파란색 BoxGeometry에 입체적으로 보이도록 만들기 위해 임의로 LineSegments를 추가했다. 오른쪽: AxesHelper를 추가하고 OrbitControl을 사용해 박스를 회전한 모습

 

위를 준비하기 위한 코드는 아래와 같다.

LineSegments는 편의상 추가한 것이므로 이후 코드에서는 생략한다.

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1);

const edges = new THREE.EdgesGeometry( geometry ); 
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: "white" } ) ); 
scene.add(line);

const material = new THREE.MeshBasicMaterial({ color: 0x3333ff });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

/**
 * Axes Helper
 */
const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

 

1. Position : 오브젝트 움직이기

Three.js는 객체 지향 프로그래밍으로 설계된 라이브러리여서 메서드 체이닝을 뜯어보는 것이 흥미롭다.

왼쪽 : three.js 패키지 내 objects 폴더 오른쪽 : Vector3 클래스 내부

 

Mesh는 기본적인 3D 객체를 나타내는 클래스이다. 표면을 가지는 고체 객체나 모형을 표현할 수 있다.

Mesh는 위에서 언급했듯 Object3D 클래스를 상속받는데, 여기엔 position 속성이 있다. position은 Vector3 생성자를 통해 만들어진다.

 

Vector3 클래스를 살펴보면? x, y, z를 매개변수로 받으며 Vector3 인스턴스의 x, y, z 값이 해당 매개변수로 값으로 된다. 디폴트 값은 0, 0, 0이다. 또한 set 메서드를 통해 x, y, z 값을 변경할 수 있다. 그 외에 Vector3라는 이름에 맞게 벡터 관련 연산을 하는 메서드들이 많이 있는 걸 볼 수 있다.

Vector3 클래스 내에 존재하는 메서드들을 한번에 볼 수 있다.

1. position 변경해 Box 이동시키기

x축으로 0.7, y축으로 -0.6, z축으로 1만큼 이동한 Box

mesh.position.x = 0.7
mesh.position.y = - 0.6
mesh.position.z = 1

mesh.position.set(0.7, -0.6, 1)

 

위 두 가지 방법 중 하나로 객체의 위치를 조정할 수 있다.

 

2. 벡터 거리 측정하기

 

console.log("mesh.position.length()",mesh.position.length())
console.log("mesh.position.distanceTo(camera.position)", mesh.position.distanceTo(camera.position))

개발자 도구 콘솔 확인

length와 distanceTo 메서드를 살펴보면

 

length는 원점에 대한 벡터 거리를 나타내고, distanceTo 는 인수로 주는 벡터와의 거리를 나타낸다.

camera.position은 Vector3 인스턴스로 distanceTo 인수에 넣을 수 있다.

Vector3 클래스 내 length 메서드

Vector3 클래스 내 distanceTo 메서드. 인수로 Vector3를 넣어주면 된다.

 

3. 벡터 정규화하기

normalize 메서드는 벡터를 단위 벡터로 변환한다. 즉, 방향은 같지만 길이가 1인 벡터로 설정한다.

정규화는 여러 그래픽스 및 물리학 계산을 간단히 해주는 중요한 역할을 하므로 필요하다.

 

this.length || 1을 해주는 이유는, 정규화 하려는 벡터의 크기가 0인 경우를 처리하여 0으로 나누는 오류를 방지하기 위함이다.

Vector3 클래스 내 normalize 메서드

Vector3 클래스 내 divideScalar 메서드

Vector3 클래스 내 multiplyScalar 메서드

---

다음 글: https://be-at-peace.tistory.com/16