yomotsu/camera-controls

어떤 프로젝트인가요?

핵심 기능

• 01setLookAt, fitToBox, rotateTo 등의 메서드에서 Promise를 지원하는 부드러운 애니메이션 전환.
• 02마우스와 터치 매핑을 설정할 수 있는 궤도 회전, dolly, truck 조작.
• 03메시와의 충돌 감지 및 카메라 타깃의 경계 제한.
• 04원근 카메라와 직교 카메라 지원.
• 05움직임이 멈췄을 때 반응할 수 있도록 rest, sleep 등의 이벤트 제공.

활용 사례

• 특정 시점으로 이동하거나 화면에 맞게 객체를 배치하는 인터랙티브 3D 제품 뷰어 제작.
• await로 연결되는 카메라 투어 또는 스크립트 기반 시네마틱 시퀀스 추가.
• 충돌 검사를 지원하는 three.js 씬에서 1인칭 또는 3인칭 스타일의 내비게이션 구현.

빠른 시작

1. 1

   camera-controls에 필요한 three.js를 설치합니다. README에는 어느 패키지에 대해서도 설치 명령이 안내되어 있지 않습니다

2. 2

   인스턴스를 만들기 전에 라이브러리를 가져오고 CameraControls.install에 THREE를 등록합니다

3. 3

   카메라와 DOM 요소를 지정해 CameraControls 인스턴스를 만든 다음, 애니메이션 루프에서 update(delta)를 호출합니다

사용 전 알아둘 점

• !three.js를 별도로 설치하고 CameraControls.install을 통해 등록해야 합니다. 그렇지 않으면 런타임 오류가 발생합니다.
• !충돌 검사는 매 프레임 raycaster를 사용하므로 colliderMeshes를 사용하면 성능이 저하될 수 있습니다.

토픽

자주 묻는 질문

camera-controls은(는) 무엇인가요?

OrbitControls 스타일의 회전에 부드러운 전환과 다양한 기능을 더하는 three.js 카메라 컨트롤 라이브러리입니다. camera-controls는 OrbitControls와 비슷한 방식으로 궤도 회전, dolly, truck(팬) 조작을 통해 three.js 카메라를 제어하는 TypeScript 라이브러리입니다. 주요 특징은 애니메이션 전환입니다. setLookAt, fitToBox, rotateTo 같은 메서드를 호출하면 카메라가 일정 시간에 걸쳐 부드럽게 이동하며, 이 메서드들은 Promise를 반환하므로 await를 사용해 전환을 차례로 연결할 수 있습니다.

camera-controls은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

camera-controls은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

camera-controls은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. camera-controls의 마지막 커밋은 2026년 10월 21일입니다.

camera-controls은(는) 어디에 사용할 수 있나요?

특정 시점으로 이동하거나 화면에 맞게 객체를 배치하는 인터랙티브 3D 제품 뷰어 제작. await로 연결되는 카메라 투어 또는 스크립트 기반 시네마틱 시퀀스 추가. 충돌 검사를 지원하는 three.js 씬에서 1인칭 또는 3인칭 스타일의 내비게이션 구현.

camera-controls는 어떻게 설치하나요?

camera-controls에 필요한 three.js를 설치합니다. README에는 어느 패키지에 대해서도 설치 명령이 안내되어 있지 않습니다 인스턴스를 만들기 전에 라이브러리를 가져오고 CameraControls.install에 THREE를 등록합니다 카메라와 DOM 요소를 지정해 CameraControls 인스턴스를 만든 다음, 애니메이션 루프에서 update(delta)를 호출합니다

camera-controls은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/yomotsu/camera-controls