aframe
プリミティブ
サーチ…
前書き
プリミティブは、フードの下で単なる<a-entity>です。これは、プリミティブがエンティティと同じAPIを持ち、コンポーネントの配置、回転、スケーリング、およびアタッチなどを意味します。 A-Frameは、 <a-box>や<a-sky>ような初心者のためにエンティティコンポーネントパターンをラップするプリミティブと呼ばれるいくつかの要素を提供します。 。開発者は独自のプリミティブも作成できます。
備考
フードの下
プリミティブは、主に初心者のための便利なレイヤー（つまり、構文的な砂糖）として機能します。プリミティブは、そのフードの下で<a-entity>です。
- 意味的な名前を付けてください（例：
<a-box>） - 既定値を持つコンポーネントの既定のバンドルを持つ
- HTML属性の[コンポーネント] [コンポーネント]データへのマップまたはプロキシ
プリミティブは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しbox 。また、プリミティブはHTMLのwidth属性を基底のgeometry.widthプロパティにマッピングし、HTMLのcolor属性を基になるmaterial.colorプロパティにマッピングします。
プリミティブの登録
AFRAME.registerPrimitive(name, definition)を使用して、独自のプリミティブを登録することができます（つまり、要素を登録するAFRAME.registerPrimitive(name, definition) 。 definitionは、これらのプロパティを定義するJavaScriptオブジェクトです。
| プロパティ | 説明 |
|---|---|
| defaultComponents | プリミティブのデフォルトコンポーネントを指定するオブジェクト。キーはコンポーネントの名前で、値はコンポーネントのデフォルトデータです。 |
| マッピング | HTML属性名とコンポーネントプロパティ名の間のマッピングを指定するオブジェクト。 HTML属性名が更新されるたびに、プリミティブは対応するコンポーネントプロパティを更新します。コンポーネントのプロパティは、ドット構文${componentName}.${propertyName}を使用して定義されます。 |
たとえば、A-Frameの<a-box>プリミティブの登録は次のとおりです。
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>