트랜스폼

개요

Three.js에서 사용되는 트랜스폼에 대해서 설명하고자 한다. 트랜스폼은 Position, Scale, Rotation 이렇게 3가지가 존재한다. 자세한 내용은 실습을 진행하면서 설명하겠다.

실습

실습을 진행하기 전에 트랜스폼에는 set 메서드를 통해서 값을 변경해주는 방법과 직접 객체의 대상 값을 변경해주는 방법이 존재하는데 편한 방법을 사용하면 된다.

Position (위치)

three.js의 경우 3D이기 때문에 Vector3를 따라 위치를 표현한다. Vector3가 궁금하면 자세한 내용은 링크를 참고하자.

// 매쉬 위치 이동
mesh.position.set(-1, 2, -5);
// 카메라까지의 거리를 계산
mesh.position.distanceTo(camera.position)

Scale (스케일)

스케일은 오브잭트의 규모를 정하는데 사용된다

mesh.scale.x = 2;
mesh.scale.set(2, 0, 0)

Rotation (회전)

rotation의 set메서드를 이용해서 객체를 회전하는 경우에는 기본적으로 X, Y, Z축으로 회전을 하기때문에 원하는 대로 회전이 되지 않을 수 있다 때문에 reorder 메서드를 이용해 회전하는 순서를 잘 정해주어야하는데, 그 이유는 object는 내부좌표계를 사용하기 때문에, 한번 회전하고 나면 축이 변경되서, 회전하는 순서를 잘 정해주어야 한다.

• 적용 전

  mesh.rotation.set(
    THREE.MathUtils.degToRad(20),
    THREE.MathUtils.degToRad(45),
    0
  );

결과

• 적용 후

  mesh.rotation.reorder("YXZ");
  mesh.rotation.set(
    THREE.MathUtils.degToRad(20),
    THREE.MathUtils.degToRad(45),
    0
  );

결과

처음에 reorder의 사용이유가 이해가 가지 않았는데 객체가 내부좌표계를 사용해서 회전을 한다는 부분을 생각하면서 이해했더니 이해가 갔다. 내부좌표계가 포인트이다.