aframe
프리미티브
수색…
소개
프리미티브는 단지 후드 아래의 <a-entity> 입니다. 즉, 프리미티브는 요소의 위치 지정, 회전, 크기 조정 및 연결과 같은 엔티티와 동일한 API를 사용합니다. A-Frame은 초보자에게 매력적 이도록 엔티티 구성 요소 패턴을 래핑하는 기본 요소라고 <a-sky> <a-box> 또는 <a-sky> 와 같은 몇 가지 요소를 제공합니다. . 개발자는 자신의 프리미티브를 만들 수도 있습니다.
비고
후드
프리미티브는 주로 신입 회원을위한 편의 계층 (즉, 구문 설탕) 역할을합니다. 이제 기본 요소는 다음 두 가지면에서 <a-entity> 입니다.
- 의미 론적 이름을 사용하십시오 (예 :
<a-box>). - 기본 값이있는 구성 요소의 사전 설정 번들을 가짐
- HTML 속성을 [component] [component] 데이터에 매핑하거나 프록시합니다.
프리미티브는 Unity의 프리 패브와 비슷합니다. 엔티티 - 구성 요소 - 시스템 패턴에 관한 일부 문헌은 집합체 로서 그것들을 참조한다. 이들은 핵심 엔티티 구성 요소 API를 다음과 같이 추상화합니다.
- 미리 지정된 기본값과 함께 유용한 구성 요소를 미리 작성하십시오.
- 복잡하지만 일반적인 유형의 엔티티 (예 :
<a-sky>)의 약자로 사용 - A-Frame은 HTML을 새로운 방향으로 사용하기 때문에 초보자에게 친숙한 인터페이스 제공
후드 아래에서이 <a-box> 프리미티브 :
<a-box color="red" width="3"></a-box>
이 엔티티 구성 요소 양식을 나타냅니다.
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> 는 geometry.primitive 속성의 기본값을 box 합니다. 그리고 프리미티브는 HTML width 속성을 기본 geometry.width 속성에 매핑하고 HTML color 속성을 기본 material.color 속성에 매핑합니다.
프리미티브 (primitive) 등록하기
우리는 AFRAME.registerPrimitive(name, definition) 사용하여 우리 자신의 프리미티브 (즉, 엘리먼트를 등록)를 등록 할 수있다. definition 은 다음 속성을 정의하는 JavaScript 객체입니다.
| 재산 | 기술 |
|---|---|
| defaultComponents | 원시적의 디폴트 컴퍼넌트를 지정하는 객체입니다. 키는 구성 요소의 이름이고 값은 구성 요소의 기본 데이터입니다. |
| 매핑 | HTML 속성 이름과 구성 요소 속성 이름 간의 매핑을 지정하는 객체입니다. HTML 애트리뷰트 이름이 업데이트 될 때마다, 프리미티브는 상응하는 컴포넌트 프로퍼티를 업데이트 할 것이다. 구성 요소 속성은 도트 구문 ${componentName}.${propertyName} 사용하여 정의됩니다. |
예를 들어, <a-box> 프리미티브에 대한 A-Frame의 등록은 다음과 같습니다.
var extendDeep = AFRAME.utils.extendDeep;
// The mesh mixin provides common material properties for creating mesh-based primitives.
// This makes the material component a default component and maps all the base material properties.
var meshMixin = AFRAME.primitives.getMeshMixin();
AFRAME.registerPrimitive('a-box', extendDeep({}, meshMixin, {
// Preset default components. These components and component properties will be attached to the entity out-of-the-box.
defaultComponents: {
geometry: {primitive: 'box'}
},
// Defined mappings from HTML attributes to component properties (using dots as delimiters).
// If we set `depth="5"` in HTML, then the primitive will automatically set `geometry="depth: 5"`.
mappings: {
depth: 'geometry.depth',
height: 'geometry.height',
width: 'geometry.width'
}
}));
그럼 우리가 사용할 수있는
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
이 엔티티 구성 요소 양식을 나타냅니다.
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>