介绍

原语别名的A-Frame实体 entities和HTML属性映射到组件 component属性。他们是一个便利层的核心API和旨在:

让我们轻松进入entity-component-system模式的概念。
提供一个更熟悉的界面只使用HTML属性映射到一个值。
Pre-compose规定默认为创建有用的组件一起开箱即用的语义构建块。

A-Frame附带一些原语等常见用例显示基本的几何基元,3 d模型和媒体资产。

例子

这里有各种各样的不同的原语在使用:

<a-scene>
  <!-- Using the asset management system for better performance. -->
  <a-assets>
    <a-asset-item id="fox-obj" src="fox.obj"></a-asset-item>
    <a-asset-item id="fox-mtl" src="fox.mtl"></a-asset-item>
    <img id="texture" src="texture.png">
    <video id="video" src="video.mp4"></video>
  </a-assets>

  <a-camera fov="80"><a-cursor></a-cursor></a-camera>
  <a-box src="#texture" depth="2" height="5" width="1"></a-sky>
  <a-image src="fireball.jpg"></a-image>
  <a-video src="#video">
  <a-obj-model src="#fox-obj" mtl="#fox-mtl"></a-obj-model>
  <a-sky color="#432FA0"></a-sky>
</a-scene>

他们是如何工作的

使用原语API创建一个广泛的红盒子,我们可以写:

<a-box color="red" width="3"></a-box>

一旦连接,这将扩大:

<a-box color="red" width="3" geometry="primitive: box; width: 3" material="color: red"></a-box>

因此,它相当于:

<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>

下面,我们看到,原语扩展<a-entity>定制元素,同时提供一些默认值。It defaults the geometry.primitive property to box. And it maps (i.e., proxies) the HTMLwidth attribute to the underlying geometry.widthproperty and the HTML colorattribute to the underlying material.color property.

基本物体是实体

自原语<a-entity>年代延伸,操作可以在实体可以在原语完成。这些操作包括:

Positioning, rotating, and scaling
附加额外的组件 components定义额外的外观、行为或功能
应用 animations
指定混入 mixins

基本物体是辅助物体

注意原语是一个辅助层之上的尖顶的核心API。因此它仍然是极其有价值的把握以下几点:

引擎盖下的系统是如何工作的
如何组合和配置组件到实体
如何使用资产管理系统

如果你还没有,我们大力推荐浏览文档的其余部分。

阅读的文档个人原语

以下为个人原始文档页面元素:

在实践中描述什么原始
大致描述原始是如何组成的
描述的组件属性的属性代理(e，g。,颜色color映射到材料material.color。材料的颜色color,这意味着颜色属性组件 material component)
描述任何技术或警告

很多原语代表几何网格(即。、形状的外观)，因此,他们中的许多人继承普通网格属性 mesh attributes。所以当属性,如color或src属性表中没有列出等原语<a-box> 或<a-plane>,他们有。时记得把常见的网格属性表。