Drei는 장면 내비게이션 및 객체와 상호작용할 수 있는 유용한 컨트롤을 제공합니다. 이제 이를 살펴보겠습니다.

Orbit Controls

이전 강의에서 장면을 탐색하기 위해 OrbitControls 컴포넌트를 이미 사용했습니다.

props 없이 사용했지만, 그 행동을 사용자 정의할 수 있는 유용한 옵션을 제공합니다.

먼저, 다음의 boolean props로 기능을 활성화하거나 비활성화할 수 있습니다:

• enableZoom
• enableRotate
• enablePan

예를 들어, 경험이 스크롤 기반이라면 사용자가 마우스 휠을 사용할 때 충돌을 방지하기 위해 줌을 비활성화할 수 있습니다.

다음으로, 컨트롤의 속도를 다음과 같이 변경할 수 있습니다:

• zoomSpeed
• rotateSpeed
• panSpeed

마지막으로, 줌의 최소 및 최대 값을 변경할 수 있습니다:

• minZoom
• maxZoom

...위쪽과 아래쪽 회전:

• minPolarAngle
• maxPolarAngle

...왼쪽과 오른쪽 회전:

• minAzimuthAngle
• maxAzimuthAngle

...그리고 pan을 다음과 같이:

• minDistance
• maxDistance

시작 프로젝트를 실행하면 버그가 있는 것처럼 보이는 위치에 도달할 수 있음을 알 수 있습니다. (지면 아래, 메쉬를 통해, 등대를 보여주지 않도록 pan 등.)

다음의 props를 결합하여 더 제한적인 경험을 만들어 보겠습니다:

Copy
<OrbitControls
  enablePan={false}
  maxPolarAngle={Math.PI / 2}
  minAzimuthAngle={-Math.PI / 2}
  maxAzimuthAngle={Math.PI / 2}
  minDistance={3}
  maxDistance={10}
/>

이제 카메라가 등대를 항상 매력적인 방식으로 보여주도록 제한된 것을 볼 수 있습니다. 사용자가 물체를 통해 보거나 지면 아래를 보지 못하도록 방지합니다.

이러한 작은 세부 사항들이 경험의 품질에 큰 차이를 만들 수 있습니다.

Drei 컴포넌트는 three.js의 OrbitControls 클래스를 감싸는 것뿐이므로, 사용 가능한 모든 props를 확인하려면 three.js documentation을 참조하십시오.

Presentation Controls

PresentationControls는 OrbitControls와 달리 카메라가 아닌 래퍼 객체의 콘텐츠와 상호 작용합니다. 그 외에는 매우 유사합니다.

여기 drei documentation에서 가져온 샘플 코드가 있습니다.