NDC - Normalized Device Coordinates - three.js

WebGL에서 화면의 좌표는 일반적으로 NDC(Normalized Device Coordinates) 좌표계를 사용합니다. Normalized Value 라고도 하며,  Three.js에서 사용합니다.

 

위 그림에서 빨강색의 좌표계는 Canvas 등 일반적으로 HTML(2D)에서 사용하는 좌표 체계입니다. 그러나 three.js에서는 힌색라인으로 표시된 NDC 좌표(3D) 체계를 사용합니다. NDC 체계에서는 X 좌표는  -1 (왼쪽 끝)에서 +1(오른쪽 끝)으로 나타내며, Y좌표는 -1(아래 끝)에서 +1(위쪽 끝) 으로 나타냅니다. Z 좌표는 일반적으로 0에서 1, 또는 -1에서 1범위로 사용되지만, 통상 2D 평면에서는 생략됩니다.

 

이 좌표를 변환하기 위하여, 다음의 함수를 사용할 수 있습니다.

// 더블 클릭하면 클릭좌표를 백터2에 저장하고, mouse.x 와 mouse.y 로 호출합니다.
document.ondblclick = function (event) {
  let mouse = new THREE.Vector2();
  mouse.set(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );
}

// 마우스 움직에 따라서 3D좌표로 변경
window.addEventListener('mousemove', function(e){
  mousePosition.x = (e.clientX / window.innerWidth) * 2 -1 ; 
  mousePosition.y = -(e.clientY / window.innerHeight) * 2 + 1; 
})

예를 들어, 오른쪽 최 상단에 마우스가 위치 한다면, e.clientX 는 1920 이며, window.innerWidth 도 1920이므로, 1*2 -1 이 되어, X는 1 로 변환됩니다. e.clientY 는 0 이며, window.innerHeight 도 0이므로, 0*2 +1 이되어, Y값은 1 이되므로, 마우스 위치 값을 NDC로 변환시에는 (1, 1) 이 됩니다. 즉,

mousePositionX : ( 1920 / 1920 ) * 2 -1 = 1 * 2 -1 = 2 -1 = 1

mousePositionY :  - ( 0/0 ) * 2 + 1 = 0 * 2 + 1 = 0 + 1 = 1

 

마우스가 Original (480,476)에 있는 경우를 한번 더 계산해 보겠습니다.

mousePositionX : ( 480 / 1920 ) * 2 -1 = 0.25 * 2 -1 = 0.5 -1 = - 0.5

mousePositionY :  - ( 476 / 952 ) * 2 + 1 = -0.5 * 2 + 1 = -1 + 1 = 0