aframe
Prymitywy
Szukaj…
Wprowadzenie
Prymitywy to tylko <a-entity> pod maską. Oznacza to, że operacje podstawowe mają taki sam interfejs API, jak elementy takie jak pozycjonowanie, obracanie, skalowanie i dołączanie komponentów. A-Frame zapewnia garść elementów, takich jak <a-box> lub <a-sky> zwanych prymitywami, które zawijają wzorzec element-byt, aby był atrakcyjny dla początkujących. . Programiści mogą również tworzyć własne prymitywy.
Uwagi
Pod maską
Prymitywy działają jak warstwa wygody (tj. Cukier syntaktyczny) przede wszystkim dla nowoprzybyłych. Na razie pamiętaj, że prymitywy są <a-entity> pod maską, która:
- Mają nazwę semantyczną (np.
<a-box>) - Mieć wstępnie ustawiony pakiet komponentów z wartościami domyślnymi
- Odwzoruj atrybuty HTML lub proxy na dane [komponentu] [komponentu]
Prymitywy są podobne do prefabrykatów w Unity . Część literatury na temat wzorca encja-komponent-system nazywa je zespołami . Wyodrębniają podstawowy interfejs API element-jednostka w celu:
- Skomponuj przydatne komponenty wraz z zalecanymi wartościami domyślnymi
- Działaj jako skrót dla złożonych, ale powszechnych typów bytów (np.
<a-sky>) - Zapewnij znajomy interfejs dla początkujących, ponieważ A-Frame wprowadza HTML w nowym kierunku
Pod maską ten prymityw <a-box> :
<a-box color="red" width="3"></a-box>
reprezentuje ten formularz komponent bytu:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> ustawia domyślnie właściwość geometry.primitive na box . A operacja pierwotna odwzorowuje atrybut width HTML na podstawową właściwość geometry.width a także atrybut color HTML na podstawową właściwość material.color .
Rejestracja prymitywu
Możemy zarejestrować własne prymitywy (tj. Zarejestrować element) za pomocą AFRAME.registerPrimitive(name, definition) . definition jest obiektem JavaScript definiującym te właściwości:
| własność | Opis |
|---|---|
| defaultComponents | Obiekt określający domyślne komponenty operacji podstawowej. Klucze to nazwy komponentów, a wartości to domyślne dane komponentów. |
| mapowania | Obiekt określający odwzorowanie między nazwą atrybutu HTML a nazwą właściwości komponentu. Za każdym razem, gdy nazwa atrybutu HTML jest aktualizowana, operacja podstawowa zaktualizuje odpowiednią właściwość komponentu. Właściwość komponentu jest definiowana za pomocą składni kropkowej ${componentName}.${propertyName} . |
Na przykład poniżej rejestracja ramki A dla operacji podstawowej <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'
}
}));
Którego wtedy możemy użyć
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
reprezentuje ten formularz komponent bytu:
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>