이 scene의 object를 클릭하고 움직이는 기능이 어떤 스크립트에 어떻게 구현되어있는지 찾아볼 것이다.
일단 스크립트명으로 추적하고 있는데
Viewport
threejs canvas가 들어있는 곳을 viewport라고 칭하고 있다.
오른쪽 아래의 축을 표현하는 ui는 viewport view helper라고 칭하고 있다.
그럼 viewport라고 되어있는 부분의 스크립트들을 살펴보자.
Viewport.js
view port 스크립트에서 editor controls, transform controls, viewport controls 등 다양한 controller가 있다.
즉 view port의 이벤트를 받아서 controller를 호출해서 처리하는 구조로 보여진다.
어떻게(?) 보면 viewport가 scene manager의 역할을 하는 셈이다.
세 개의 controller 중에 transform controls와 관련된 기능을 먼저 보도록 하자.
아마 이 스크립트가 내가 찾던 object translation 관련 기능이 담겨있을 것 같다.
우선 transform controls 객체를 생성하고 사용하는 과정에서 처음보는 이벤트 리스너명들이 보인다.
axis-changed? objectChange? 이런 이벤트 리스너는 기본적으로 document에는 없는 것들이다.
그렇다면 직접 custom한 리스너이고, 이들은 transform controls에 들어있을 것이다.
여기 transform controls 스크립트에 define property를 통해 listener를 정의하고 있는게 보인다.
defineProperty는 이벤트를 정의하고 있고, 중간에 -changed라는 suffix가 있다.
직접 정의하고 이벤트를 사용한다는 개념 자체는 알겠다.
일단 필요한 부분은 TransformControls.js에 대부분 있을 것 같으므로 이 스크립트 전반적으로 쭉 훑어보자.
TransformControls.js
import { TransformControls } from 'three/addons/controls/TransformControls.js';한 번 쭉 훑어보았는데, 그제서야 이걸 그냥 import해서 addon으로 사용할 수 있는 구조라는 걸 깨달았다.
찾아보면 transform controls는 그냥 객체로 생성해서 바로 사용할 수 있는 형태이다.
별다른 구현 없이 trasnformation 관련 gizmo를 생성하고 이벤트로 조작할 수 있다.
그럼 중요한 것은 view port 스크립트이다.
Viewport.js
view port에서 transform controls를 사용하는 파트를 조금씩 살펴보자.
보면 이벤트에서 mouseDown으로 objection의 정보를 가져오고,
그대로 mouseUp동작을 하면 transform controls에서 현재 mode(translate / rotate / scale)중 하나를 선택하여 editor의 command를 실행한다.
아무래도 그 이후 transform control의 gizmo를 띄워주고 동작가능하게 하는 단계가 따라오지 않을까.
위 세 함수들은 각각 mode 설정과, snap 이벤트, space변경시 호출되는 함수들이다.
mode와 snap의 경우 transform control의 control mode 및 snap은 드래그 움직임으로 object를 움직이는 것을 말하는 것일 텐데,
space change는 어떤 것을 말하는 걸까.
viewport 내에서 object를 클릭하면 object select 이벤트가 호출될 것이다.
이때 transform controls에서는 detach를 이용하여 기존의 select된 오브젝트를 분리하고,
attach를 이용해서 새로운 object를 select 한다.
object를 삭제하는 경우에도 transform control에서 기존 object를 분리한다.
이정도까지가 view port 스크립트에서 transform control을 사용하는 부분들이다.
아직 잘 모르겠지만 구현으로 넘어가 보도록 해볼까.
