Three.js는 웹 브라우저에서 3D 그래픽을 만들고 제어하는 데 사용되는 JavaScript 라이브러리입니다. Three.js를 사용하면 웹사이트나 앱에서 3D 모델을 렌더링하고 상호작용하는 기능을 구현할 수 있습니다. 이번 블로그 포스트에서는 Three.js를 사용하여 터치 및 제스처 인식 기반의 인터랙션을 구현하는 방법을 알아보겠습니다.

1. Three.js 설치 및 설정

먼저, Three.js를 프로젝트에 설치해야 합니다. npm을 사용하신다면 아래의 명령어를 이용해 Three.js를 설치할 수 있습니다.

npm install three

Three.js를 다운로드하셨다면, HTML 파일에 Three.js 스크립트를 추가해주세요.

<script src="path/to/three.js"></script>

2. 터치 및 제스처 이벤트 등록

Three.js를 사용하여 3D 모델을 렌더링한 후, 터치 및 제스처 이벤트를 등록해야 합니다. 이를 위해 아래와 같이 TouchEvent, GestureEvent 등의 이벤트를 사용할 수 있습니다.

// 터치 이벤트 등록
window.addEventListener('touchstart', onTouchStart, false);
window.addEventListener('touchmove', onTouchMove, false);
window.addEventListener('touchend', onTouchEnd, false);

// 제스처 이벤트 등록
window.addEventListener('gesturestart', onGestureStart, false);
window.addEventListener('gesturechange', onGestureChange, false);
window.addEventListener('gestureend', onGestureEnd, false);

위의 예제에서는 onTouchStart, onTouchMove, onTouchEnd, onGestureStart, onGestureChange, onGestureEnd와 같은 이벤트 핸들러 함수를 만들어야 합니다.

3. 인터랙션 구현

이제 터치 및 제스처 이벤트 핸들러 함수 내에서 원하는 인터랙션 기능을 구현할 수 있습니다. 예를 들어, 터치한 지점에 따라 3D 모델을 회전시키는 기능을 구현해보겠습니다.

let touchStartX = 0;
let touchStartY = 0;
let rotationX = 0;
let rotationY = 0;

function onTouchStart(event) {
  touchStartX = event.touches[0].clientX;
  touchStartY = event.touches[0].clientY;
}

function onTouchMove(event) {
  const diffX = event.touches[0].clientX - touchStartX;
  const diffY = event.touches[0].clientY - touchStartY;
  rotationY += diffX * 0.01;
  rotationX += diffY * 0.01;

  // 모델에 회전 적용
  model.rotation.set(rotationX, rotationY, 0);
}

function onTouchEnd(event) {
  // 터치 종료 후 관련 변수 초기화
  touchStartX = 0;
  touchStartY = 0;
}

위의 코드는 터치 시작 시의 좌표(touchStartX와 touchStartY)와 터치 이동량을 기준으로 모델의 회전 값을 계산하여 적용합니다. model은 Three.js로 렌더링한 3D 모델 객체입니다.

4. 결과 확인

웹 브라우저에서 Three.js를 사용하여 터치 및 제스처 인식 기반의 인터랙션을 구현한 결과를 확인할 수 있습니다. 위의 코드를 실행한 후, 터치한 지점을 드래그하면 3D 모델이 회전하게 됩니다.

이렇게 Three.js를 사용하여 터치 및 제스처 인식 기반의 인터랙션을 구현할 수 있습니다. Three.js에는 다양한 인터랙션 기능을 구현할 수 있는 다른 이벤트도 함께 제공되어 있으니, 필요에 따라 찾아보시기 바랍니다.

참고 문서: Three.js 공식 문서