aframe
개체

A-Frame은 <a-entity> 요소를 통해 개체를 나타냅니다. 엔티티 구성 요소 시스템 패턴에서 정의 된대로 엔티티는 표시, 동작 및 기능을 제공하기 위해 구성 요소를 연결하는 자리 표시 객체입니다.

행동 양식

addState (stateName)

addState 는 상태를 엔터티로 푸시합니다. 그러면 stateadded 이벤트가 발생하고 상태를 확인할 수 있습니다 .is :

entity.addEventListener('stateadded', function (evt) {
  if (evt.detail.state === 'selected') {
    console.log('Entity now selected!');
  }
});
entity.addState('selected');
entity.is('selected');  // >> true

emit (이름, 세부 사항, 거품)

emit은 엔티티에서 사용자 정의 DOM 이벤트를 내 보냅니다. 예를 들어 애니메이션을 트리거하는 이벤트를 내보낼 수 있습니다.

<a-entity>
  <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
</a-entity>

entity.emit('rotate');

이벤트 세부 정보 나 데이터를 두 번째 인수로 전달할 수도 있습니다.

entity.emit('collide', { target: collidingEntity });

이벤트는 기본적으로 거품으로 표시됩니다. 우리는 거품에 대해 거짓을 전달함으로써 거품을 일으키지 말라고 말할 수 있습니다.

entity.emit('sink', null, false);

flushToDOM (재귀 적)

flushToDOM은 엔티티의 구성 요소 데이터를 수동으로 직렬화하고 DOM을 업데이트합니다.

getAttribute (componentName)

getAttribute 는 구문 분석 된 구성 요소 데이터 (mixins 및 defaults 포함)를 검색합니다.

// <a-entity geometry="primitive: box; width: 3">
entity.getAttribute('geometry');
// >> {primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ...}
entity.getAttribute('geometry').primitive;
// >> "box"
entity.getAttribute('geometry').height;
// >> 2
entity.getAttribute('position');
// >> {x: 0, y: 0, z: 0}

componentName가 등록 된 구성 요소의 이름이 아닌 경우 getAttribute는 정상적으로 작동합니다.

// <a-entity data-position="0 1 1">
entity.getAttribute('data-position');
// >> "0 1 1"

getDOMAttribute (componentName)

getDOMAttribute 는 DOM 또는 setAttribute 를 통해 명시 적으로 정의 된 구문 분석 된 구성 요소 데이터 만 검색합니다. componentName 가 등록 된 구성 요소의 이름 인 경우 getDOMAttribute 는 HTML에 정의 된 구성 요소 데이터 만 구문 분석 객체로 반환합니다. 반환 된 구성 요소 데이터에는 적용된 mixins 또는 기본값이 포함되지 않으므로 구성 요소의 getDOMAttribute 는 getAttribute 의 부분 형식입니다.

위의 getAttribute 예제의 결과를 비교하십시오.

// <a-entity geometry="primitive: box; width: 3">
entity.getDOMAttribute('geometry');
// >> { primitive: "box", width: 3 }
entity.getDOMAttribute('geometry').primitive;
// >> "box"
entity.getDOMAttribute('geometry').height;
// >> undefined
entity.getDOMAttribute('position');
// >> undefined

getObject3D (유형)

getObject3D 는 object3DMap의 type 에 의해 참조 된 자식 THREE.Object3D 를 찾습니다 .

AFRAME.registerComponent('example-mesh', {
  init: function () {
     var el = this.el;
     el.getOrCreateObject3D('mesh', THREE.Mesh);
     el.getObject3D('mesh');  // Returns THREE.Mesh that was just created.
  }
});

getOrCreateObject3D (type, 생성자)

엔티티에 THREE.Object3D 유형이 등록되어 있지 않으면 getOrCreateObject3D 는 전달 된 생성자를 사용하여 인스턴스화 된 THREE.Object3D 를 등록합니다. 엔티티 유형에 따라 등록 된 THREE.Object3D을 가지고있는 경우, getOrCreateObject3D는 getObject3D 역할을합니다 :

AFRAME.registerComponent('example-geometry', {
  update: function () {
    var mesh = this.el.getOrCreateObject3D('mesh', THREE.Mesh);
    mesh.geometry = new THREE.Geometry();
  }
});

일시 중지 ()

pause () 는 애니메이션 및 구성 요소에 정의 된 동적 동작을 중지합니다. 엔티티를 일시 중지하면 애니메이션이 중지되고 각 구성 요소에 대해 Component.pause ()가 호출됩니다. 구성 요소는 일시 중지시 발생하는 이벤트를 구현하기로 결정하며 이는 종종 이벤트 리스너를 제거합니다. 엔터티는 엔터티를 일시 중지 할 때 하위 엔터티에 대해 pause ()를 호출합니다.

// <a-entity id="spinning-jumping-ball">
entity.pause();

예를 들어, 일시 중지시 look-controls 구성 요소는 입력을 수신하는 이벤트 핸들러를 제거합니다.

play ()

play () 는 애니메이션 및 구성 요소에 정의 된 동적 동작을 시작합니다. 이것은 DOM이 엔티티를 첨부 할 때 자동으로 호출됩니다. 엔터티가 play () 될 때 엔터티는 자식 엔터티에 대해 play () 를 호출 합니다 .

entity.pause();
entity.play();

예를 들어 재생중인 사운드 구성 요소가 사운드 재생을 시작합니다.

setAttribute (componentName, value, [propertyValue | clobber])

componentName 가 등록 된 구성 요소의 이름이 아니거나 구성 요소가 단일 등록 정보 구성 요소 인 경우 setAttribute 는 평소와 같이 작동합니다.

entity.setAttribute('visible', false);

componentName 가 등록 된 구성 요소의 이름이라면 값에 대한 특수 구문 분석을 처리 할 수 ​​있습니다. 예를 들어, 위치 구성 요소 는 단일 속성 구성 요소이지만 속성 유형 파서는 객체를 가져올 수 있습니다.

entity.setAttribute('position', { x: 1, y: 2, z: 3 });

setObject3D (type, obj)

setObject3D 는 전달 된 obj 인 THREE.Object3D를 엔티티의 object3DMap 아래에 유형 으로 등록합니다. A-Frame은 엔티티의 루트 object3D 의 자식으로 obj 를 추가합니다.

AFRAME.registerComponent('example-orthogonal-camera', {
  update: function () {
    this.el.setObject3D('camera', new THREE.OrthogonalCamera());
  }
});

removeAttribute (componentName, propertyName)

componentName 이 등록 된 구성 요소의 이름이고 DOM에서 속성을 제거하는 경우 removeAttribute 는 구성 요소의 제거 라이프 사이클 메소드를 호출하여 구성 요소를 엔티티에서 분리합니다.

entity.removeAttribute('goemetry');  // Detach the geometry component.
entity.removeAttribute('sound');  // Detach the sound component.

propertyName 형식이 주어지면, removeAttribute은이 호텔의 기본값으로 propertyName 형식으로 지정된 해당 속성의 속성 값을 다시 설정합니다 :

entity.setAttribute('material', 'color', 'blue');  // The color is blue.
entity.removeAttribute('material', 'color');  // Reset the color to the default value, white.

removeObject3D (유형)

removeObject3D 는 type 으로 지정된 객체를 엔티티의 THREE.Group 에서 제거하여 씬에서 제거합니다. 이것은 엔티티의 object3DMap 을 갱신하여 유형 키의 값을 널 (NULL)로 설정합니다. 이것은 일반적으로 구성 요소에서 호출되며 일반적으로 제거 핸들러 내에서 자주 호출됩니다.

AFRAME.registerComponent('example-light', {
  update: function () {
    this.el.setObject3D('light', new THREE.Light());
    // Light is now part of the scene.
    // object3DMap.light is now a THREE.Light() object.
  },
  remove: function () {
    this.el.removeObject3D('light');
    // Light is now removed from the scene.
    // object3DMap.light is now null.
  }
});

removeState (stateName)

removeState 는 엔티티에서 상태를 팝합니다. 이렇게하면 stateremoved 이벤트가 발생하고 상태를 확인할 수 있습니다 .is :

entity.addEventListener('stateremoved', function (evt) {
  if (evt.detail.state === 'selected') {
    console.log('Entity no longer selected.');
  }
});
entity.addState('selected');
entity.is('selected');  // >> true
entity.removeState('selected');
entity.is('selected');  // >> false

이벤트

사건 세부 사항

다음은 각 이벤트에 대한 이벤트 세부 정보입니다.