HTML和A-Frame原语(Primitives)
本节将覆盖A-Frame原语元素的基本概念以及它们与实体-组件框架的关系。如果你需要了解具体如何使用HTML和原语,可以参阅: 开发指南中构建一个基本场景一节。
HTML
A-Frame基于 HTML 和 DOM,对于自定义元素使用一个polyfill。HTML是Web的基石,提供了最容易访问的计算机语言。无需安装或编译构建,创建HTML只需要使用文本, 然后在浏览器中打开该HTML文件。由于A-Frame基于HTML,因此大多数现有的工具和库的工作框架,包括React,Vue.js,Angular,d3.js,jQuery都能够和A-Frame一起工作。
如果你没有HTML的基础,可以阅读我们的HTML5免费在线教程。
原语(Primitives)
尽管HTML层看起来很基础,HTML和DOM只是A-Frame的表面抽象层。其内部实现上,A-Frame实际上是一个实体-组件(entity-component)框架,基于three.js并以声明的方式来暴露编程接口。
A-Frame提供一些简单易用的标签元素如 <a-box>
和 <a-sky>
,这些被称之为
原语(primitives),实际上是实体-组件模式的封装,使其对于初学者容易使用。在文档左侧导航栏的底部,我们可以看到包含所有现成可用的原语的列表。开发人员当然也可以创建他们自己的原语。
实例
下面是一个使用了若干基本A-Frame原语的例子程序,创建网孔模型,渲染360°内容,定制环境,放置相机等:
底层机制
原语主要是为
新手提供一个易用的语法封装层(即语法糖)。我们现在只要记住原语是一个具备如下特征的<a-entity>
:
- 有语义名称(比如:
<a-box>
) - 有默认值预设绑定组件
- 映射或代理HTML属性到组件数据
原语(Primitives)和Unity中的prefabs类似。实体-组件-系统模式中的一些用词被引用为组合(assemblages)。 它们把核心的实体-组件API抽象为:
- 预先组成有用的组件连同规定的默认值
- 用作复杂但常用的实体类型的速写方式(比如:
<a-sky>
) - 为初学者提供一个类似HTML标签的编程接口
在底层实现中,这个 <a-box>
原语为:
|
表示如下实体组件形式:
|
<a-box>
的geometry.primitive
属性被设置为缺省值 box
。并且该原语映射HTML width
属性为底层的 geometry.width
属性,同样的HTML color
属性被映射为底层的 material.color
属性。
将组件附加到原语
原语(Primitive)本质上就是一个 <a-entity>
。这意味这原语拥有和实体一样的应用程序接口,比如定位(positioning), 旋转(rotating), 缩放(scaling), 和附加组件(attaching
components)。
实例
本例中我们将A-Frame社区贡献的物理(physics)组件附加到原语。来自Don McCurdy所写的 aframe-physics-system
并通过HTML属性附加到原语上:
|
注册一个原语
我们可以使用 AFRAME.registerPrimitive(name, definition)
方法来注册一个原语(也就是注册一个元素)。其中 definition
参数是一个JavaScript对象,定义了如下属性:
Property | Description | Example |
---|---|---|
defaultComponents | 指定原语默认组件的对象。键是组件的名称,值是组件的默认数据。 | {geometry: {primitive: 'box'}} |
mappings | 指定HTML属性名和组件属性名称之间映射的对象。每当更新HTML属性(attribute)时,原语将更新相应的组件属性(property)。组件属性通过一个点语法来定义:${componentName}.${propertyName} 。 |
{depth: 'geometry.depth', height: 'geometry.height', width: 'geometry.width'} |
实例
比如,下面是A-Frame中 <a-box>
原语的注册代码:
|
比如,Don McCurdy写的 aframe-extras
软件包中包含了一个 <a-ocean>
原语,该原语封装了其中的 ocean
组件。下面是 <a-ocean>
的定义:
|
通过注册 <a-ocean>
原语,我们将可以像普通HTML标签一样来创建一个海洋对象:
|