대가는 결과를 만든다

A-Frame Component 본문

개발/VR

A-Frame Component

yunzema 2018. 12. 18. 18:14
반응형

Component

Component는 Entity의 외관, 동작, 기능을 추가하기 위해 연결되는 재사용 가능한 모듈형 구성요소 이다.

three.js와 javascript 코드를 HTML에서 선언적으로 사용할 수 있게 캡슐화 됨.



단일 특성 구성요소

< a-entity  position = "1 2 3" > </ a-entity >


다중 특성 구성요소

< a-entity  light = "type : point, color : crimson" > </ a-entity >





Component 등록

AFRAME.registerComponent (name, definition)

  • {string} name- 구성 요소 이름. HTML의 속성 명으로 나타내지는 Component의 public API
  • {Object} definition- 구성 요소 정의. 스키마 및 생명주기 메서드를 포함.


예시

// Registering component in foo-component.js
AFRAME.registerComponent('foo', {
  schema: {},                    //component의 속성 정의
  init: function () {},          //component가 처음 초기화될 때 호출

  update: function () {},        //component가 처음 초기화될때, component의 속성이 변경될 때 호출
                                   : entity 수정할 때 사용

  tick: function () {},          //render loop가 호출될 때 마다 호출
                                   : 계속되는 변화를 체크할 때 사용 

  remove: function () {},        //component가 entity에서 제거될때, scene에서 분리될 때 호출
                                   : 이전에 있던 entity에 대한 모든 수정사항을 취소할때 사용 

  pause: function () {},         //component가 entity에서 제거 혹은 entity가 scene에서 분리될 때,
                                   scene이나 entity가 정지할 때 호출됨.

  play: function () {}           //scene이나 entity가 작동될때, component가 초기화될 때 한번 호출됨.
                                    : 행동을 시작하거나 계속할 때 사용

});


<!-- Usage of `foo` component. -->
<html>
  <head>
    <script src="aframe.min.js"></script>
    <script src="foo-component.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity foo></a-entity>
    </a-scene>
  </body>
</html>







Schema 정의

AFRAME.registerComponent('bar', {
  schema: {
    color: {default: '#FFF'},
    size: {type: 'int', default: 5}
  }
}

<a-scene>
  <a-entity bar="color: red; size: 20"></a-entity>
</a-scene>

Property Type

DescriptionDefault Value
arrayParses comma-separated values to array (i.e., "1, 2, 3" to ['1', '2', '3']).[]
assetFor URLs pointing to general assets. Can parse URL out of a string in the form of url(<url>). If the value is an element ID selector (e.g., #texture), this property type will call getElementById and getAttribute('src') to return a URL. The asset property type may or may not change to handle XHRs or return MediaElements directly (e.g., <img> elements).‘’
audioSame parsing as the asset property type. Will possibly be used by the A-Frame Inspector to present audio assets.‘’
booleanParses string to boolean (i.e., "false" to false, everything else truthy).false
colorCurrently doesn’t do any parsing. Primarily used by the A-Frame Inspector to present a color picker. Also, it is required to use color type for color animations to work.#FFF
intCalls parseInt (e.g., "124.5" to 124).0
mapSame parsing as the asset property type. Will possibly be used by the A-Frame Inspector to present texture assets.‘’
modelSame parsing as the asset property type. Will possibly be used by the A-Frame Inspector to present model assets.‘’
numberCalls parseFloat (e.g., "124.5" to 124.5').0
selectorCalls querySelector (e.g., "#box" to <a-entity id="box">).null
selectorAllCalls querySelectorAll and converts NodeList to Array (e.g., ".boxes"to [<a-entity class=”boxes”, …]),null
stringDoesn’t do any parsing.‘’
vec2Parses two numbers into an {x, y} object (e.g., 1 -2 to {x: 1, y: -2}.{x: 0, y: 0}
vec3Parses three numbers into an {x, y, z} object (e.g., 1 -2 3 to {x: 1, y: -2, z: 3}.{x: 0, y: 0, z: 0}
vec4Parses four numbers into an {x, y, z, w} object (e.g., 1 -2 3 -4.5 to {x: 1, y: -2, z: 3, w: -4.5}.{x: 0, y: 0, z: 0, w: 0}








"this" 를 이용한 Component prototype 접근


- this.data : component의 속성값

   *attribute는 여기서 직접 수정하지 말고, setAttribute를 이용하여 변경할 것


- this.el : Entity를 HTML 요소로서 참조

- this.el.sceneEl : Scene을 HTML 요소로서 참조

- this.el.object3D : Entity의 three.js object 

- this.id : Component가 다중 값을 갖는다면 (multiple:true), Component의 각 값의 ID를 나타냄

( foo from sound__foo)







Component 생명주기 메서드 Details


1 .init() : Component 생명주기 시작

  - 호출 : component가 enitity에 정적으로 적용 되있는 상태에서 페이지가 Load될 때

 setAttribute로 Component가 entity에 적용될 때

 scene에 appendChild로 적용될 때


  - 사용 : 초기 상태와 변수 설정, 메서드 연결, event listener 연결


2. update(oldData) : Component의 속성값이 변경 될때마다 호출

  - 호출 : 1) Component의 생명주기 시작, init() 후에 

  2) setAttribute로 Component의 속성이 변경되었을 때


  - 사용 : this.data를 이용한 entity의 수정하는 작업

 Component의 속성이 변할 때마다 수정


3. play() : entity나 scene이 다시 시작 될 때 호출

 - 호출 : Component가 처음 연결되었을 때 update() 이후

  entity나 scene이 pause되었다가 Entity.play() , Scene.play() 로 다시 시작될 때

 - 사용 : eventlistener 추가


4. tick(time, timeDelta) : -호출 : scene의 각 render loop frame마다 호출

60~120 / second

entity나 scene이 멈추지 않으면 계속 호출

entity가 scene에 연결되어있는 동안 계속 호출

 -사용 : 각 프레임이나 주기마다 지속적인 entity의 수정

상태를 가져오기 위해


예시) tracked controls component : controller의 위치, 회전, 버튼 클릭 상태 체크를 업데이트 하여 controller의 애니메이션을 표시

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


5. tock() : tick()과 동일하지만 scene이 랜더링 된 후에 호출

  -후처리 효과처럼 headset에 scene을 전달하기 이전에 scene에 접근에 사용 됨.


4. pause() : entity나 scene이 중단될 때 호출

 -호출 : component가 제거되기 전에 remove() 전에 호출

Entity.pause(), Scene.pause() 호출 시 (Inspector가 열렸을 때)

 -사용 : event listener 제거, 동적 행동 제거할 시


5. remove() : component가 entity로 부터 분리될 때 호출

-호출 : removeAttribute로 component가 entity에서 제거될 때

removeChild같이 scene에서 entity가 제거될 때

-사용 : 모든 Component의 수정사항을 제거, 취소 시

        event listener 제거시






Component의 변수와 메서드 접근

.components로 접근 가능


예시

AFRAME.registerComponent('foo', {
  init: function () {
    this.bar = 'baz';
  },

  qux: function () {
    // ...
  }
});


var fooComponent = document.querySelector('[foo]').components.foo;
console.log(fooComponent.bar);
fooComponent.qux();


저작자표시 비영리 변경금지

'개발 > VR' 카테고리의 다른 글

AFrame에서 Three.js의 접근  (0) 2018.12.24
ECS in A-Frame  (0) 2018.12.19
A-Frame Tracker 지원 여부 리서치  (0) 2018.12.12
A-Frame Primitives  (0) 2018.12.05
A-Frame 기본 리서치  (0) 2018.12.04
'개발/VR' Related Articles more
Comments