three.js, 선택된 모델에 대한 줌(Zoom)

3D 그래픽 기능 개발에 있어서 선택된 모델을 화면에서 확대하는 기능입니다.

ZoomControls 라는 클래스로 컴포넌트화 해서 재사용성을 높였습니다. 이 기능은 제 유튜브 채널의 강좌에서 설명하고 있는 코드를 거의 그대로 사용하고 있습니다.

ZoomControls에 대한 API 사용은 다음과 같습니다.

먼저 ZoomControls 객체를 생성합니다.

_setupControls() {
  this._orbitControls = new OrbitControls(this._camera, this._divContainer);
 
  ...

  const zoomControls = new ZoomControls(this._orbitControls);
  this._zoomControls = zoomControls;
}

그리고 확대하고자 하는 Object3D에 대해 다음처럼 코드를 수행해주면 됩니다.

zoom(zoomTarget, view) {
  if (view === "좌측 뷰") this._zoomControls.zoomLeft(zoomTarget);
  else if (view === "우측 뷰") this._zoomControls.zoomRight(zoomTarget);
  else if (view === "정면 뷰") this._zoomControls.zoomFront(zoomTarget);
  else if (view === "후면 뷰") this._zoomControls.zoomBack(zoomTarget);
  else if (view === "상단 뷰") this._zoomControls.zoomTop(zoomTarget);
  else if (view === "하단 뷰") this._zoomControls.zoomBottom(zoomTarget);
  else if (view === "뷰 유지") this._zoomControls.zoom(zoomTarget);
}

선택된 모델에 대한 아웃라인 표시는 SelectionPassWrapper API를 사용하였고 이와 관련된 내용은 다음과 같습니다.

three.js, 선택된 3D 모델에 대한 하이라이팅