aframe
Примитивы
Поиск…
Вступление
Примитивы - это всего лишь <a-entity> под капотом. Это означает, что примитивы имеют тот же API, что и объекты, такие как позиционирование, поворот, масштабирование и прикрепление компонентов. A-Frame предоставляет несколько элементов, таких как <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 . И примитив сопоставляет атрибут width HTML с базовым свойством geometry.width а также с атрибутом color HTML с базовым свойством 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>