vr-mode-controls
vr-mode-controls는 VR 모드에 진입했을 때 Rig, Controller 등을 초기화하고 컨트롤러의 입력을 처리하는 컴포넌트이다.
VR 모드에서는 collidable 컴포넌트를 가지고 있는 오브젝트들의 이동, 회전, 축척을 변형할 수 있다. 온전하게 오브젝트와 상호작용 하기 위해서는 6DoF가 지원되는 HMD와 컨트롤러를 요구한다. 컨트롤러는 장치에 의해 추적되어 가상 씬 안에서 3D 모델로 렌더링되며 모델의 머리 부분에서 가상의 레이저를 쏘아 보낸다. 이 레이저는 대부분의 상호작용을 위해 사용된다.
상호작용 방법은 다음과 같이 다섯 가지로 분류된다.
•
카메라 이동
카메라 이동 모드는 호버링 모드와 자유이동 모드 두 가지가 있다. 왼손이든 오른손이든 상관없이 컨트롤러의 썸스틱을 클릭하면 두 모드가 번갈아 토글링된다.
◦
자유이동 모드
자유이동 모드는 썸스틱을 움직였을 때 월드 좌표계에서의 썸스틱이 향하는 방향 그대로 움직이는 모드이다.
◦
호버링 모드
호버링 모드는 높이를 고정하고 동일한 높이를 가지는 평면에서 움직이는 모드이다. 자유이동 모드의 방향을 기반으로 하지만 높이의 변화를 무시한다.
•
한손 트리거 조작
◦
트리거버튼은 가상 레이저를 통해 오브젝트를 조작한다. 레이저를 타겟 오브젝트에 관통시킨 상태에서 트리거버튼을 눌러 홀딩하면 컨트롤러와 타겟 오브젝트는 하나의 강체인 것처럼 처리된다. 따라서 이 상태에서 컨트롤러를 움직이면 타겟 오브젝트의 포지션과 로테이션을 조작할 수 있다.
•
한손 그립 조작
◦
컨트롤러의 오리진을 타겟 오브젝트에 겹친 상태에서 그립버튼을 눌러 홀딩하면 컨트롤러와 타겟 오브젝트는 하나의 강체인 것처럼 처리된다. 예외적으로 타겟 오브젝트가 VR 특수 컴포넌트(VR 1축 힌지, VR 슬라이더, VR 스냅 등)를 가지고 있다면 그 컴포넌트에 의해 트랜스폼 매트릭스가 수정될 수 있다.
•
양손 트리거 조작
◦
하나의 타겟 오브젝트에 양손 컨트롤러로 동시에 트리거 조작을 하면 타겟 오브젝트의 포지션은 고정된 채로 회전만 줄 수 있다.
•
양손 그립 조작
◦
하나의 타겟 오브젝트에 양손 컨트롤러로 동시에 그립 조작을 하면 타겟 오브젝트의 포지션과 로테이션은 고정된 채로 스케일을 조절할 수 있다. 이때 x, y, z 축의 스케일은 함께 조절된다.
•
작업 스택
◦
Undo : 왼손 컨트롤러의 X버튼을 누르면 최근 작업을 되돌릴 수 있다.
◦
Redo : 왼손 컨트롤러의 Y버튼을 누르면 최근에 Undo한 작업을 다시 실행할 수 있다.
•
이벤트 트리거 버튼
◦
오른손 컨트롤러의 A버튼 또는 B버튼을 누르면 각각 'aButtonDown', 'bButtonDown'이벤트를 씬 엘리먼트에 emit한다. 이벤트로 트리거되는 다양한 컴포넌트를 활용하면 A버튼과 B버튼으로 다양한 사용자 경험을 제공할 수 있다.
vr-1axis-hinge
vr-1axis-hinge는 VR 모드에서 어떤 물체에 대해 1축 힌지와 같은 constraint를 주기 위한 컴포넌트이다. vr-1axis-hinge는 단 하나의 프로퍼티 axis가 있고 'x', 'y', 'z' 중 한 값을 가진다. 로컬 좌표계에서 그 축에 대해서만 회전이 가능하도록 constraint를 준다는 의미이다.
{
axis: {default:'x', oneOf: ['x, 'y', 'z']}
}
JavaScript
복사
한손 그립 조작으로 물체를 조작할 때 transform 매트릭스를 revise하여 작동한다.
vr-slide
vr-slide는 VR 모드에서 어떤 물체에 대해 슬라이드와 같은 constraint를 주기 위한 컴포넌트이다.
한손 그립 조작으로 물체를 조작할 때 transform 매트릭스를 revise하여 작동한다. 포지션은 슬라이드 축을 따라서만 움직일 수있게 되며 회전이 불가능하게된다. 또한 미리 설정된 스토퍼와 가까워지면 해당 스토퍼가 선택되며 이벤트를 발생시키고 릴리즈 할때는 가장 가까운 스토퍼에 달라 붙는다. 스토퍼는 일직선 상의 양자화된 포지션이다.
vr-slide 컴포넌트의 스키마는 다음과 같다.
{
criteriaPosition: {type: 'vec3'},
slideDirection: {default: '+x', oneOf: ['+x', '-x', '+y', '-y', '+z', '-z']},
length : {type: 'number', default: 1},
numberOfStopper: {type: 'number', default: 2},
eventPrefix: {type: 'string'}
}
JavaScript
복사
criteriaPosition은 0번 스토퍼의 포지션이다. 로컬 좌표계를 따른다.
slideDirection은 슬라이드 가능한 축을 지정한다. +또는 -를 통해 스토퍼가 나열되는 방향을 결정할 수 있다.
length는 0번 스토퍼와 마지막 스토퍼 사이의 거리이자 슬라이딩 될 수 있는 범위의 길이이다. 이 값은 양수여야 한다.
numberOfStopper는 스토퍼의 개수이며 2이상의 값을 가져야 한다. 나열된 모든 스토퍼 사이의 거리는 균등하다. 스토퍼는 가시적으로 보이지 않기 때문에 가시화를 원한다면 별도의 메쉬를 통해 표시해주어야 한다.
eventPrefix는 선택된 스토퍼가 바뀌는 순간 발생시키는 이벤트 이름에 붙는 prefix이다. 이 prefix에 stopper번호를 붙인 문자열로 이벤트가 발생된다.
vr-snap
vr-snap은 VR 모드에서 의도된 UX를 가질 수 있도록 물체의 포지션 조작을 보정하기 위한 컴포넌트이다. 한손 그립 조작으로 물체를 조작하다가 미리 설정된 타겟포인트와 근접하면 그 위치로 revise된다. 이렇게 revise하는 것을 스냅이라고 한다.
vr-snap은 multiple 컴포넌트이며 스키마는 다음과 같다.
{
target: {type: 'string'},
attachPoint: {type: 'vec3'},
tolerance: {type: 'number', default: 0.1},
initRotation: {type:'vec3'},
rotationMirror: {type: 'boolean'},
hingeAxis: {type: 'string'}
}
JavaScript
복사
target과 attachPoint는 타겟포인트를 설정하기 위한 프로퍼티이다. 이 컴포넌트를 가진 오브젝트의 오브젝트 좌표계에서 attachPoint에 해당하는 점이 target으로 설정된 오브젝트의 origin과 일치하도록 했을때 이 컴포넌트를 가진 오브젝트의 포지션이 타겟포인트가 된다.
tolerance는 타겟포인트와 이 컴포넌트를 가진 오브젝트의 포지션이 근접한 것인지 아닌지 나누는 경계를 정의한다. 정확히는 월드 좌표계에서 구한 attachPoint와 타겟 오브젝트의 origin 사이의 거리의 제곱이 tolerance를 초과하는지 아닌지로 구분한다.
initRotation은 스냅되었을 때 설정할 로테이션 값이다.
rotationMirror는 스냅된 후 일어나는 이 컴포넌트를 가진 오브젝트의 로테이션 변화가 타겟 오브젝트에도 미러링될지 여부이다.
hingeAxis는 스냅됐을 때 1축 힌지와 같은 constraint를 주기 위한 프로퍼티이다. nullable 프로퍼티로서 필요하지 않은 경우는 입력하지 않아도된다. 이 값은 'x', 'y', 'z' 중의 하나의 값을 가지며 그 의미는 vr-1axis-hinge 컴포넌트와 같다. 실제로 vr-1axis-hinge 컴포넌트를 동적으로 추가하거나 제거한다.