카메라 컨트롤을 어떤 걸 사용해야 할지 모르겠습니다...!

안녕하세요, 인프런 AI 인턴이에요. 카메라 컨트롤에 대한 질문이시군요.

우선, https://www.lamborghini.com/en-en/3dFlyControls을 통해 구현하려는 기능을 확인했습니다. 해당 사이트에서는 Three.js 라이브러리를 사용하여 카메라 컨트롤을 구현하고 있습니다.

Three.js는 다양한 카메라 컨트롤러를 제공하고 있기 때문에 선택할 수 있는 여러 가지 옵션이 있습니다. 두 가지 컨트롤러(FlyControls와 PointerLockControls)를 이미 시도해 보셨지만 문제가 있었던 것 같아요.

FlyControls의 경우 화면이 기울어지는 문제가 발생한다고 하셨는데, 이는 FlyControls를 사용하면서 카메라가 보는 방향이 개발자에게 상대적으로 유지되는 현상입니다. 이러한 현상은 많은 3D 카메라 컨트롤러에서 발생할 수 있는 문제인데, 이를 해결하려면 매 프레임마다 카메라를 리셋하거나, 원하는 시점에 카메라를 리셋하는 로직을 추가해야 합니다.

PointerLockControls의 경우 마우스가 사라진다는 문제가 발생한다고 하셨는데, 이는 커서를 숨기는 기능을 사용하면서 발생하는 문제입니다. 이를 해결하려면 마우스 이벤트를 커스터마이징하여 커서를 숨기거나, 마우스 이동에 대한 조건을 추가하여 원하는 동작을 구현할 수 있습니다.

이외에도 Three.js에서 제공하는 OrbitControls, FirstPersonControls 등 다른 컨트롤러도 사용할 수 있습니다. 카메라 컨트롤러를 선택할 때 주요 고려사항은 원하는 동작 및 제약 사항입니다. 우선은 원하는 동작을 중심으로 각 컨트롤러의 특징을 파악해 보시고, 해당하는 컨트롤러를 선택하시면 될 것 같아요.

카메라 객체로 컨트롤 셋팅을 하고 따로 셋팅할 값들에 대해 궁금하신 것 같은데, Three.js의 각 컨트롤러는 다양한 설정 옵션을 제공합니다. 컨트롤러마다 다른 옵션이 있을 수 있으니 해당 컨트롤러의 문서 또는 예제를 참고하시면서 필요한 설정값들을 적용하실 수 있을 거에요.

더 자세한 내용이 필요하다면 Three.js 공식 문서와 다른 사용자들의 질문과 답변을 참고하시면 도움이 될 것입니다.

좋은 결과를 얻으실 수 있기를 바랄게요. 추가적인 질문이 있으면 언제든지 물어보세요. 수고하세요!

Three.js에서 제공되는 카메라 컨트롤 중에는 FirstPersonControls가 근접해 보이는데요, 람보르기니 웹사이트 처럼 드래그로 바꾸고 이것저것 원하는대로 설정하려면 컨트롤 소스코드를 수정을 해야하는데, 그것보다는 아래와 같은 소스코드를 참고해 보시면 어떨까 싶습니다.

https://codepen.io/mjurczyk/pen/gOwbMVr