인프런 커뮤니티 질문&답변
작성한 질문수
카메라 컨트롤을 어떤 걸 사용해야 할지 모르겠습니다...!
작성
·
385
0
안녕하세요. 1분코딩 선생님 강의를 수강 중인 수강생입니다.
현재 아래 사이트의 화면과 비슷한 기능을 구현해야 하는 상황인데 어떤 카메라 컨트롤을 써야 할지 감이 잡히지 않아 질문 드립니다...
https://www.lamborghini.com/en-en/3d
FlyControls와 PointerLockControls로 테스트를 해보았는데 FlyControls의 경우는 비슷하게 구현은 되었지만 화면을 계속 움직이다보면 화면이 기울어버리는 경우가 생기고,
PointerLockControls의 경우는 움직이려면 lock(); 함수를 실행시키면 마우스가 사라져서 문제가 되었습니다.
카메라 컨트롤 셋팅은 glb파일의 카메라 객체를 넣어 생성하였습니다.
위의 사이트와 비슷한 기능을 만들려면 어떤 카메라 컨트롤러가 적합할까요...?
카메라 객체로 컨트롤 셋팅을 하고 따로 셋팅을 해줘야하는 값들이 있을까요...?
답변 및 조언 주시면 정말 감사하겠습니다!
답변 2
1
안녕하세요, 인프런 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 공식 문서와 다른 사용자들의 질문과 답변을 참고하시면 도움이 될 것입니다.
좋은 결과를 얻으실 수 있기를 바랄게요. 추가적인 질문이 있으면 언제든지 물어보세요. 수고하세요!
0
Three.js에서 제공되는 카메라 컨트롤 중에는 FirstPersonControls가 근접해 보이는데요, 람보르기니 웹사이트 처럼 드래그로 바꾸고 이것저것 원하는대로 설정하려면 컨트롤 소스코드를 수정을 해야하는데, 그것보다는 아래와 같은 소스코드를 참고해 보시면 어떨까 싶습니다.