수색…


소개

컨트롤러는 사람을 VR 응용 프로그램에 몰두할 때 매우 중요합니다. VR의 잠재력은 6 자유도 (6DoF)를 제공하는 컨트롤러가 없으면 충족되지 않습니다. 컨트롤러를 사용하여 사람들은 씬 주위를 돌아 다니며 손으로 물건과 상호 작용할 수 있습니다.

A-Frame은 Gamepad Web API를 통해 각각의 WebVR 브라우저가 지원하는 스펙트럼 전반의 컨트롤러 용 구성 요소를 제공합니다. Vive, Oculus Touch, Daydream 및 GearVR 컨트롤러 용 구성 요소가 있습니다.

비고

gamepadextention을 활성화해야 할 수도 있습니다. 이 단계를 사용하여 다음 작업을 수행 할 수 있습니다.

  • Chrome : chrome://flags
  • Firefox : about:config
  • Internet Explorer : 바탕 화면의 그룹 정책 편집기로 이동
  • Opera에서 : opera:config
  • 가장자리에서 : about:flags 찾습니다 about:flags

Wasd 컨트롤

wasd-controls 구성 요소는 W , A , SD 또는 화살표 키보드 키를 사용하여 엔터티를 제어합니다. wasd-controls 구성 요소는 일반적으로 카메라 구성 요소가있는 엔티티에 연결됩니다.

<a-entity camera look-controls wasd-controls></a-entity>

아지트 키보드의 경우 Z , Q , SD 키를 사용할 수 있습니다.

보기 제어

룩 - 컨트롤 컴포넌트 :

  • VR 헤드 장착 디스플레이 (HMD)를 회전 할 때 엔티티를 회전합니다.
  • 마우스를 클릭하고 끌 때 엔티티를 회전합니다.
  • 터치 스크린을 터치 드래그 할 때 엔티티를 회전합니다.

look-controls 구성 요소는 일반적으로 카메라 구성 요소와 함께 사용됩니다.

<a-entity camera look-controls></a-entity>

주의 사항

룩 컨트롤을위한 컴포넌트를 직접 생성하려면 HMD 추적 비트를 복사하여 컴포넌트에 붙여 넣어야합니다. 앞으로는 사람들이 자신의 컨트롤을보다 쉽게 ​​만들 수있는 시스템을 갖추게 될 것입니다.

커서에 시선 추가하기

이를 위해 카메라에 커서 구성 요소를 추가해야합니다.

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
    <!-- Or <a-entity cursor></a-entity> -->
  </a-camera>
</a-scene>

커서 (구성 요소) 항목에서 더 많은 정보를 찾을 수 있습니다.

손 컨트롤

A- 프레임 0.x 0.3

A-Frame은 손 컨트롤 구성 요소를 통해 여러 유형의 6DoF 컨트롤러 (Vive, Oculus Touch)를 지원하기위한 구현을 제공합니다. 손 - 컨트롤 구성 요소는 주로 6DoF 컨트롤러 용입니다. 왜냐하면 오브젝트를 잡는 것과 같은 실물 크기의 상호 작용을 목표로하기 때문입니다. 손 - 컨트롤 구성 요소는 Vive 및 Oculus Touch 컨트롤러 모두에서 다음과 같이 작동합니다.

  • vive-controls와 oculus-touch-controls 컴포넌트 모두 설정하기

  • 간단한 손 모델로 컨트롤러 모델 재정의

  • 이벤트와 제스처를 손에 넣기 위해 Vive-specific 및 Oculus Touch- 특정 이벤트 매핑 (예 : 그립 (gripdown) 및 썸업에 대한 트리거 다운)

손 - 컨트롤 구성 요소를 추가하려면 :

<a-entity hand-controls="left"></a-entity>
<a-entity hand-controls="right"></a-entity>

안타깝게도 3DoF 컨트롤러 (즉, Daydream, GearVR)의 모든 유형을 추상화하는 3DoF 컨트롤러 구성 요소는 아직 없습니다. 두 컨트롤러 모두에서 작동하는 사용자 정의 컨트롤러를 만들 수 있습니다. 3DoF 컨트롤러는 상호 작용 (즉, 터치 패드로 회전 추적 만)을위한 많은 잠재력을 제공하지 않으므로 다루기가 쉽습니다.

손 컨트롤은 움직이는 동작과 함께 추적 된 손 (지정된 모델 사용)을 제공합니다. 손 컨트롤은 vive-controls 및 oculus-touch-controls 구성 요소를 래핑하고 차례로 추적 제어 구성 요소를 래핑합니다. 이 구성 요소는 추가 이벤트를 제공하고 손으로 애니메이션과 포즈를 처리합니다.

<a-entity hand-controls="left"></a-entity>
<a-entity hand-controls="right"></a-entity>

추적 된 컨트롤

A- 프레임 0.x 0.3

추적 제어 구성 요소는 A- 프레임의 기본 제어기 구성 요소로서 A- 프레임의 모든 제어기 구성 요소를위한 토대를 제공합니다. 추적 제어 구성 요소 :

  • ID 또는 접두사가있는 Gamepad API에서 Gamepad 개체를 가져옵니다.

  • 게임 패드 API의 포즈 (위치 및 방향)를 컨트롤러 모션 읽기에 적용합니다.

  • 게임 패드 객체의 버튼 값의 변화가 축과 터치 패드 (즉 변경 될 때 버튼을 누르거나 만져되는 이벤트 제공을 찾습니다 axischanged , buttonchanged , buttondown , buttonup , touchstart , touchend ).

A-Frame의 모든 컨트롤러 구성 요소는 다음을 통해 tracked-controls 구성 요소 위에 구축됩니다.

  • 적절한 Gamepad ID (예 : Oculus Touch (Right))를 사용하여 엔티티에서 추적 된 컨트롤 구성 요소를 설정합니다. 예를 들어, vive-controls 구성 요소는

    el.setAttribute('tracked-controls', {idPrefix: 'OpenVR'})
    

    tracked-controls 은 엔티티에 대한 포즈 및 이벤트를 제공하기 위해 적절한 Gamepad 개체에 연결됩니다.

  • 추적 된 컨트롤에 의해 제공된 이벤트 추상화. 추적 제어 이벤트는 저수준입니다. 버튼 매핑을 사전에 알아야하기 때문에 이러한 이벤트만으로 어떤 버튼이 눌려 졌는지 알 수 없습니다. 컨트롤러 구성 요소는 해당 컨트롤러에 대해 사전에 매핑을 알 수 있으며 triggerdown 또는 xbuttonup 과 같은 더 많은 의미 론적 이벤트를 제공 할 수 있습니다.

  • 모델 제공. tracked-controls 만으로는 모양이 제공되지 않습니다. 컨트롤러 구성 요소는 버튼을 누르거나 터치 할 때 시각적 인 피드백, 제스처 및 애니메이션을 보여주는 모델을 제공 할 수 있습니다. 다음 컨트롤러 구성 요소는 컨트롤러가 발견되어 Gamepad API에서 연결된 것으로 판단되는 경우에만 활성화됩니다.

tracked-controls 구성 요소는 추적 된 컨트롤러와 인터페이스합니다. 추적 컨트롤은 Gamepad API를 사용하여 추적 된 컨트롤러를 처리하고 수동 컨트롤 구성 요소는 물론 vive 컨트롤 및 oculus-touch-controls 구성 요소로 추상화됩니다. 이 컴포넌트는 적절한 컨트롤러를 선택하고 엔티티에 포즈를 적용하며 버튼 상태를 관찰하고 적절한 이벤트를 내 보냅니다.

최근 브라우저 별 변경으로 인해 Vive 컨트롤러는 "OpenVR Gamepad" 또는 "OpenVR Controller" 라는 id 값을 가진 Gamepad API에 의해 반환 될 수 있으므로 Vive / OpenVR 컨트롤러 용 idPrefix 를 사용하는 것이 좋습니다.

<a-entity tracked-controls="controller: 0; idPrefix: OpenVR"></a-entity>

3Dof 및 6Dof 컨트롤러

3DoF 컨트롤러 추가하기

3 자유도 (3DoF)를 가진 컨트롤러는 회전 추적에만 국한됩니다. 3DoF 컨트롤러에는 위치 추적이 없기 때문에 손을 앞뒤로 움직이거나 손을 움직일 수 없습니다. 3DoF 만있는 컨트롤러는 팔이없는 손과 손목을 가진 것과 같습니다. VR의 자유도에 대해 자세히 읽어보십시오.

3DoF 컨트롤러 구성 요소는 회전 추적, 실제 하드웨어와 일치하는 기본 모델 및 버튼 매핑을 추상화하는 이벤트를 제공합니다. Google Daydream 및 Samsung GearVR 용 컨트롤러에는 3DoF가 있으며 한 손에는 컨트롤러 하나만을 지원합니다.

A- 프레임 0.x 0.6

백일몽 컨트롤러

daydream-controls 구성 요소는 Google Daydream 컨트롤러와 인터페이스합니다. 버튼 매핑, 이벤트 및 터치되거나 누른 버튼 (트랙 패드)을 강조 표시하는 백일몽 컨트롤러 모델을 추가하는 동안 추적 된 컨트롤 구성 요소를 래핑합니다.

손과 상관없이 백일몽 컨트롤러와 일치합니다.

<a-entity daydream-controls></a-entity>

공상가 컨트롤러가 존재하는 경우, 그리고 지정된 핸드와 일치하는 경우.

<a-entity daydream-controls="hand: left"></a-entity>
<a-entity daydream-controls="hand: right"></a-entity>

GearVR- 컨트롤러

gearvr- 컨트롤 컴포넌트는 Samsung / Oculus Gear VR 컨트롤러와 인터페이스합니다. 버튼 매핑, 이벤트 및 터치되거나 누른 버튼 (트랙 패드, 트리거)을 강조 표시하는 Gear VR 컨트롤러 모델을 추가하는 동안 추적 된 컨트롤 구성 요소를 래핑합니다.

<!-- Match Gear VR controller if present, regardless of hand. -->
<a-entity gearvr-controls></a-entity>
<!-- Match Gear VR controller if present and for specified hand. -->
<a-entity gearvr-controls="hand: left"></a-entity>
<a-entity gearvr-controls="hand: right"></a-entity>

6DoF 컨트롤러 추가하기

6 자유도 (6DoF) 컨트롤러는 회전 및 위치 추적을 모두 수행합니다. 오리엔테이션에 제약이있는 3DoF가있는 컨트롤러와 달리 6DoF가있는 컨트롤러는 3D 공간에서 자유롭게 움직일 수 있습니다. 6DoF 덕분에 우리는 등 뒤로 몸을 가로 질러 손을 움직이거나 얼굴 가까이에 도달 할 수 있습니다. 6DoF를 갖는 것은 손과 팔이 모두있는 현실과 같습니다. 6DoF는 헤드셋 및 추가 추적기 (예 : 발, 소도구)에도 적용됩니다. 진정한 몰입 형 VR 경험을 제공하기 위해서는 6DoF가 최소한이어야합니다.

6DoF 컨트롤러 구성 요소는 전체 추적, 실제 하드웨어와 일치하는 기본 모델 및 단추 매핑을 추상화하는 이벤트를 제공합니다. HTC Vive와 Oculus Rift with Touch는 양손에 6DoF와 컨트롤러를 제공합니다. 또한 HTC Vive는 실제 세계의 추가 객체를 추적하여 VR로 추적하는 추적기를 제공합니다.

A- 프레임 0.x 0.3

진동 컨트롤러

vive-controls 구성 요소는 HTC Vive 컨트롤러 / 완드와 인터페이스합니다. 버튼 매핑, 이벤트, 누른 버튼 (트리거, 그립, 메뉴, 시스템) 및 트랙 패드를 강조 표시하는 Vive 컨트롤러 모델을 추가하면서 추적 된 컨트롤 구성 요소를 래핑합니다.

<a-entity vive-controls="hand: left"></a-entity>
<a-entity vive-controls="hand: right"></a-entity>
A- 프레임 0.x 0.5

Oculus 터치 컨트롤러

oculus-touch-controls 컴포넌트는 Oculus Touch 컨트롤러와 인터페이스합니다. 버튼 매핑, 이벤트 및 Touch 컨트롤러 모델을 추가하는 동안 추적 된 컨트롤 구성 요소를 래핑합니다.

<a-entity oculus-touch-controls="hand: left"></a-entity>
<a-entity oculus-touch-controls="hand: right"></a-entity>

마우스 컨트롤

마우스 컨트롤은 VR 모드에서만 사용할 수 있으며 HMD가없는 게임에도 사용할 수 있습니다. 마우스 컨트롤에 대한 자세한 내용은 마우스 커서 예제를 참조하십시오.

<a-scene>
  <a-entity camera look-controls mouse-cursor>
</a-scene>


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow