three.js, 뒤에서 보여지는 물체 감추기

실내와 같은 장면을 3D로 살펴볼때 벽처럼 막힌 부분이 장면의 시인성을 방해하는 경우가 있습니다. 아래가 그러한 경우입니다.

위의 영상에서 보이는 것처럼 실내의 물체를 벽이 가리는 문제가 있습니다. 이런 문제점을 해결하기 위해 뒤에서 보여지는 물체(벽 등)를 잠시 보이지 않도록 해주는 기능이 필요한데요. 아래는 그에 대한 결과입니다.

이에 대한 기능을 컴포넌트로 만든 것이 BackViewHiderControls 입니다. 관련 API는 다음과 같습니다.

먼저 컨트롤러 객체를 생성합니다.

_setupControls() {
  ...

  const backViewHider = new BackViewHiderControls(this._camera);
  this._backViewHider = backViewHider;

  ...
}

그리고 매 프레임마다 호출되는 update 매서드에서 다음 코드를 입력합니다.

update() {
  ....

  this._backViewHider.updateOnFrame();
}