aframe
커서

소개

통사론

• <a-entity cursor = ""> </ a-cursor>
• <a-cursor> </ a-cursor>

매개 변수

비고

기본 커서

예를 들어, 화면 중앙에 고정 된 원형 커서를 만들 수 있습니다. 커서가 화면에 고정되도록 커서가 어디에 있든지 상관없이 커서는 항상 활성 카메라 엔티티의 자식으로 배치됩니다. 카메라를 음의 Z 축에 놓아 카메라 앞쪽으로 당깁니다. 커서가 상자를 클릭하면 click 이벤트를들을 수 있습니다.

<a-entity camera>
  <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
  </a-entity>
</a-entity>

<a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue">
</a-entity>

// Component to change to random color on click.
AFRAME.registerComponent('cursor-listener', {
  init: function () {
    var COLORS = ['red', 'green', 'blue'];
    this.el.addEventListener('click', function (evt) {
      var randomIndex = Math.floor(Math.random() * COLORS.length);
      this.setAttribute('material', 'color', COLORS[randomIndex]);
      console.log('I was clicked at: ', evt.detail.intersection.point);
    });
  }
});

커서 구성 요소로 응시 기반 상호 작용

우선 시선을 기반으로하는 상호 작용을 살펴 보겠습니다. 응시 기반 상호 작용은 머리를 회전시키고 대상과 상호 작용하기 위해 대상을 바라 보는 데 의존합니다. 이러한 유형의 상호 작용은 컨트롤러가없는 헤드셋에 대한 것입니다. 회전 전용 컨트롤러 (Daydream, GearVR)에서도 상호 작용은 여전히 ​​유사합니다. A-Frame은 기본적으로 마우스 드래그 컨트롤을 제공하기 때문에, 카메라 회전을 드래그하여 상호 작용을 미리보기 위해 시선 기반의 데스크톱을 사용할 수 있습니다.

응시 기반 상호 작용을 추가하려면 구성 요소를 추가하거나 구현해야합니다. A-Frame에는 카메라에 부착 된 시선 기반 상호 작용을 제공하는 커서 구성 요소가 있습니다.

1. 엔티티를 명시 적으로 정의하십시오. 이전에는 A- 프레임이 기본 카메라를 제공하고있었습니다.
2. a-cursor 엔티티를 카메라 엔티티 아래의 하위 요소로 추가하십시오.
3. 필요에 따라 커서에서 사용하는 레이 캐스터를 구성하십시오.

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

커서 프리미티브

커서 프리미티브는 핸드 컨트롤러가없는 장치에서 씬과의 기본적인 상호 작용 및 클릭을 허용하는 레티클입니다. 기본 모양은 링 형상입니다. 커서는 대개 카메라의 자식으로 배치됩니다.

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
  <a-box></a-box>
</a-scene>

퓨즈 기반 커서

응시 기반 커서라고도합니다. 커서를 퓨즈 기반으로 설정하면 사용자가 설정된 시간 동안 엔티티를 쳐다볼 때 커서가 클릭을 트리거합니다. 사용자의 머리에 레이저가 묶여 있다고 가정하고 레이저가 현장으로 확장됩니다. 사용자가 엔터티를 충분히 길게 (예 : fuseTimeout) 쳐다 본다면 커서가 클릭을 트리거합니다.

VR에 대한 퓨즈 기반 상호 작용의 장점은 헤드셋 이외의 추가 입력 장치가 필요 없다는 것입니다. 퓨즈 기반 커서는 주로 Google Cardboard 응용 프로그램 용입니다. 퓨즈 기반 상호 작용의 단점은 사용자가 머리를 많이 돌려야한다는 것입니다.

Raycaster 구성 요소를 통한 커서 구성

커서는 레이 캐스터 구성 요소 위에 있으며 Raycaster 구성 요소에 따라 달라집니다. 우리가 커서의 레이캐스팅 조각을 사용자 정의하려면 레이 캐스터 구성 요소 속성을 변경하여 수행 할 수 있습니다. 최대 거리를 설정하고 교차로를 덜 자주 확인하고 클릭 가능한 객체를 설정한다고 가정 해 보겠습니다.

<a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>

시각적 피드백 추가하기

커서에 시각적 피드백을 추가하여 커서가 클릭되거나 퓨징되는 시점을 표시하려면 애니메이션 시스템을 사용할 수 있습니다. 커서가 엔티티와 교차하면 이벤트를 내고 애니메이션 시스템은 begin 속성을 사용하여 이벤트를 선택합니다.

<a-entity cursor="fuse: true; fuseTimeout: 500"
          position="0 0 -1"
          geometry="primitive: ring"
          material="color: black; shader: flat">
  <a-animation begin="click" easing="ease-in" attribute="scale"
               fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
  <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
               fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>

마우스 커서

참고 : 이 예제에서는 외부 npm 패키지를 추가해야합니다.

컴퓨터의 마우스 커서를 사용하려면 aframe-mouse-cursor-component 를 추가해야합니다. 다음 코드를 사용하여 스크립트를 포함해야하는 경우 :

import 'aframe';
import 'aframe-mouse-cursor-component';

// or this 

require('aframe');
require('aframe-mouse-cursor-component');

그리고 카메라에서 mouse-cursor 구성 요소를 추가해야합니다.

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