aframe
구성 요소

엔티티 구성 요소 시스템 패턴에서 구성 요소는 모양, 동작 및 / 또는 기능을 추가하기 위해 엔티티에 연결하는 재사용 가능한 모듈 덩어리의 데이터입니다.

A-Frame에서 구성 요소는 장면의 3D 객체 인 엔티티를 수정합니다. 우리는 복잡한 구성 요소를 만들기 위해 구성 요소를 함께 조합하여 구성합니다. 그것들은 three.js와 JavaScript 코드를 HTML에서 선언적으로 사용할 수있는 모듈로 캡슐화합니다. 구성 요소는 대략 CSS와 유사합니다.

정의 수명주기 핸들러 메소드

스키마가 해부학 적 구조이므로 생애주기 방법은 생리학입니다. 스키마가 데이터의 모양을 정의하면 수명주기 핸들러 메소드는 데이터를 사용 하여 엔티티를 수정합니다. 핸들러는 대개 Entity API 와 상호 작용 합니다 .

메소드 개요

구성 요소 프로토 타입 속성

방법 내에서, 우리는을 통해 구성 요소 프로토 타입에 액세스 할 수 있습니다 this :

행동 양식

.init ()

.init () 는 구성 요소의 라이프 사이클 시작시 한 번 호출됩니다. 엔티티는 구성 요소의 init 처리기를 호출 할 수 있습니다.

• 구성 요소가 HTML 파일의 엔터티에 정적으로 설정되고 페이지가로드 될 때
• 구성 요소가 setAttribute 를 통해 첨부 된 엔터티에 설정되어있는 경우
• 구성 요소가 연결되지 않은 엔터티에 설정되면 엔터티가 appendChild 를 통해 장면에 연결됩니다.

init 핸들러는 종종 다음을 수행하는 데 사용됩니다.

• 초기 상태 및 변수 설정
• 바인드 메소드
• 이벤트 리스너 부착

예를 들어 커서 구성 요소의 init 은 상태 변수를 설정하고 메서드를 바인딩하며 이벤트 리스너를 추가합니다.

AFRAME.registerComponent('cursor', {
  // ...
  init: function () {
    // Set up initial state and variables.
    this.intersection = null;
    // Bind methods.
    this.onIntersection = AFRAME.utils.bind(this.onIntersection, this);
    // Attach event listener.
    this.el.addEventListener('raycaster-intersection', this.onIntersection);
  }
  // ...
});

.update (oldData)

.update (oldData) 는 구성 요소의 속성이 변경 될 때마다 호출됩니다 .update (oldData) 구성 요소의 수명주기 시작시 포함). 엔티티는 구성 요소의 update 처리기를 호출 할 수 있습니다.

• init () 이 호출 된 후 구성 요소의 수명주기가 시작됩니다.
• 구성 요소의 속성이 .setAttribute 로 업데이트되는 .setAttribute .

update 처리기는 종종 다음 작업을 수행하는 데 사용됩니다.

• 대부분의 작업은 this.data 사용하여 엔티티에 수정 작업을 수행합니다.
• 하나 이상의 구성 요소 등록 정보가 변경 될 때마다 엔티티를 수정하십시오.

엔티티에 대한 세부적인 변형이 [diffing의 [DIFF 의해 수행 될 수있는 현재 데이터 세트 ( this.data 업데이트 (전의 이전 데이터 집합) oldData ).

A-Frame은 구성 요소의 수명주기가 시작될 때마다 그리고 구성 요소의 데이터가 변경 될 때마다 (예 : setAttribute 의 결과 .update() 호출합니다. 업데이트 처리기는 종종 this.data 를 사용하여 엔터티를 수정합니다. 업데이트 처리기는 첫 번째 인수를 통해 구성 요소 데이터의 이전 상태에 액세스 할 수 있습니다. 구성 요소의 이전 데이터를 사용하여 세부적인 업데이트를 수행하기 위해 어떤 속성이 변경되었는지 정확하게 알 수 있습니다.

예를 들어 보이는 구성 요소의 update 는 엔터티의 가시성을 설정합니다.

AFRAME.registerComponent('visible', {
  /**
   * this.el is the entity element.
   * this.el.object3D is the three.js object of the entity.
   * this.data is the component's property or properties.
   */
  update: function (oldData) {
    this.el.object3D.visible = this.data;
  }
  // ...
});

.remove ()

.remove () 는 구성 요소가 엔터티에서 분리 될 때마다 호출됩니다. 엔티티는 구성 요소의 remove 핸들러를 호출 할 수 있습니다.

• 구성 요소가 removeAttribute 를 통해 엔티티에서 제거 된 경우.
• 엔티티가 장면에서 분리 될 때 (예 : removeChild ).

remove 처리기는 종종 다음 작업을 수행하는 데 사용됩니다.

• 엔티티에 대한 구성 요소 수정 사항을 모두 제거, 실행 취소 또는 정리하십시오.
• 이벤트 리스너를 분리합니다.

예를 들어, [조명 구성 요소] [조명]이 제거되면 조명 구성 요소는 이전에 엔티티에 설정 한 조명 객체를 제거하여 장면에서 제거합니다.

AFRAME.registerComponent('light', {
  // ...
  remove: function () {
    this.el.removeObject3D('light');
  }
  // ...
});

.tick (time, timeDelta)

.tick () 은 씬의 렌더 루프의 틱이나 프레임마다 호출됩니다. 장면은 구성 요소의 tick 핸들러를 호출합니다.

• 렌더링 루프의 각 프레임에서.
• 초당 60 ~ 120 번 정도.
• 엔티티 또는 장면이 일시 중지되지 않은 경우 (예 : 관리자가 열려있는 경우)
• 엔티티가 여전히 장면에 첨부 된 경우.

tick 처리기는 종종 다음 작업을 수행하는 데 사용됩니다.

• 각 프레임 또는 간격에서 엔티티를 지속적으로 수정하십시오.
• 조건에 대한 설문 조사.

tick 처리기는 밀리 초 ( time ) 및 마지막 프레임 이후의 시간차 (밀리 초) ( timeDelta )로 장면의 전체 가동 시간을 제공합니다. 이것들은 일정 간격으로 tick 핸들러의 부분만을 보간하거나 실행하는데 사용될 수 있습니다.

예를 들어 추적 된 컨트롤 구성 요소 는 컨트롤러의 애니메이션을 진행하고 컨트롤러의 위치와 회전을 업데이트하며 버튼 누름을 확인합니다.

AFRAME.registerComponent('tracked-controls', {
  // ...
  tick: function (time, timeDelta) {
    this.updateMeshAnimation();
    this.updatePose();
    this.updateButtons();
  }
  // ...
});

.pause ()

.pause () 는 엔티티 또는 장면이 일시 중지되면 호출됩니다. 엔티티는 구성 요소의 pause 처리기를 호출 할 수 있습니다.

• 구성 요소가 제거되기 전에 remove 핸들러가 호출됩니다.
• 엔터티가 Entity.pause () 일시 중지 된 경우
• 장면이 Scene.pause () 일시 정지 된 경우 (예 : 관리자가 열렸을 때).

pause 처리기는 종종 다음 작업을 수행하는 데 사용됩니다.

• 이벤트 리스너를 제거하십시오.
• 동적 동작의 가능성을 제거하십시오.

예를 들어 사운드 구성 요소 는 사운드 를 일시 중지하고 이벤트에서 사운드를 재생 한 이벤트 리스너를 제거합니다.

AFRAME.registerComponent('sound', {
  // ...
  pause: function () {
    this.pauseSound();
    this.removeEventListener();
  }
  // ...
});

.play ()

.play () 는 엔티티 또는 장면이 다시 시작될 때 호출됩니다. 엔티티는 구성 요소의 play 처리기를 호출 할 수 있습니다.

• update 처리기가 호출 된 후 구성 요소가 처음 연결됩니다.
• 엔티티가 일시 중지되었지만 Entity.play () 로 다시 시작된 경우.
• 장면이 일시 중지되었지만 Scene.play () 로 다시 시작되었습니다.

play 처리기는 종종 다음과 같은 용도로 사용됩니다.

• 이벤트 리스너를 추가하십시오.

예를 들어 사운드 구성 요소 는 사운드 를 재생하고 이벤트에서 사운드를 재생할 이벤트 리스너를 업데이트합니다.

AFRAME.registerComponent('sound', {
  // ...
  play: function () {
    if (this.data.autoplay) { this.playSound(); }
    this.updateEventListener();
  }
  // ...
});

.updateSchema (data)

.updateSchema () 가 정의되어 있으면 스키마가 동적으로 수정되어야하는지 확인하기 위해 모든 업데이트에서 호출됩니다.

updateSchema 핸들러는 종종 다음 작업을 수행하는 데 사용됩니다.

• 대개 속성 값에 따라 스키마를 동적으로 업데이트하거나 확장합니다.

예를 들어 지오메트리 구성 요소 는 다른 유형의 지오메트리에 대해 스키마를 업데이트할지 여부를 결정하기 위해 primitive 속성이 변경되었는지 확인합니다.

AFRAME.registerComponent('geometry', {
  // ...
  updateSchema: (newData) {
    if (newData.primitive !== this.data.primitive) {
      this.extendSchema(GEOMETRIES[newData.primitive].schema);
    }
  }
  // ...
});

구성 요소 방제 방법

.flushToDOM ()

문자열 화시 CPU 시간을 절약하기 위해 A-Frame은 실제 DOM에서 구성 요소의 직렬화 된 표현 만 디버그 모드로 업데이트합니다. flushToDOM ()을 호출하면 구성 요소의 데이터를 수동으로 직렬화하고 DOM을 업데이트합니다.

document.querySelector('[geometry]').components.geometry.flushToDOM();