Multiple views with uniform controls
HTML 기반 Layout
먼저 html tag를 사용하여 view 영역을 잡습니다.
main view의 perspective와 우측 3개의 side panel에 대한 view side 정보를 Zustand 상태로 관리합니다.
이 상태 값을 Mantine 컴포넌트를 사용하여 표시합니다.
View
4개로 나눈 영역에 동일한 Scene을 표시합니다. 다만, 각각의 view는 다른 카메라를 사용합니다. 각 카메라는 동일한 Scene을 바라보지만, 서로 다른 위치와 방향을 가집니다. 이렇게 하면 동일한 Scene을 바라보는 여러 개의 카메라를 사용하여 다양한 시점의 view를 표시할 수 있습니다.
Main view는 <PivotControls /> 컴포넌트를 사용하여 대상 객체를 이동 및 회전할 수 있습니다.
객체를 <PivotControls /> 의 하위 컴포넌트로 추가하지 않고 matrix 속성을 사용하여 <PivotControls />이 제어하는 transform 정보를 공유합니다.
따라서 matrix 속성에 전달한 객체를 전역으로 정의하고 모든 scene에 전달함으로서 객체의 이동 및 회전을 모든 view에서 동일하게 적용할 수 있습니다.
주의할 점은 matrix 속성을 사용하지 않고 onUpdate 속성을 사용했다는 것 입니다.
이유는 Three.js의 transform 객체(예: Matrix4, Vector3 등)가 읽기 전용(read-only)으로 정의되어 있어서, 직접 덮어쓸 수 없기 때문입니다.
그래서 특별한 경우에는 복사(copy) 대신 참조(reference)를 유지해야 하므로 onUpdate를 사용합니다.