TransformControls and makeDefault
이 예제는 Valtio, makes proxy-state simple for React and Vanilla라는 경량의 상태 관리 라이브러리를 사용합니다.
Vanilla JS에서 객체를 변경하면 react 컴포넌트에서 useSnapshot을 통해 값 변경에 따른 렌더링을 수행합니다.
예제에서 사용하는 GLTF 파일에는 9개의 mesh가 있습니다. 먼저 각 mesh를 랜덤한 위치에 배치합니다.
클릭시에는 valtio를 통해 선택한 mesh가 무엇인지를 관리합니다.
특정 mesh를 클릭하여 그 이름을 valtio를 사용해 설정하면 Controls 컴포넌트에서 mesh 이름을 기준으로 three.js object를 찾습니다.
이 three.js object를 TransformControls에 전달하면 객채의 위치, 크기, 각도 등을 변경할 수 있는 컨트롤을 제공합니다.
OrbitControl을 같이 설정하면 마우스 드래그시 카메라 위치를 변경할 수 있습니다.
문제는 TransformControls과 함께 사용할 경우 두 컨트롤에서 동시에 마우스 이벤트를 처리하기 때문에 transform과 카메라 위치 변경이 동시에 이루어 집니다.
이때 <OrbitControls makeDefault />를 설정하면 transform 동작시에 카메라 위치 변경이 이루어지지 않습니다.