[A-frame文档学习笔记]HTML&Primitives

HTML&Primitives

 

一、Primitives

Primitives是原始的基本体，也就是说是A-frame内置的一些元素，例如<a-box>，这些元素可以完成一些基本的功能，这个概念类似于Unity里面的一些系统已经为我们封装好的预制体，例如Unity里的Cube，Main camera等，如果我们没有这个预制体，我们也可以通过创建空物体，然后加上组件来完成预制体的建造。在A-frame里ECS的思想依然适用，系统提供了一些基本的标签<a-box>等，他们在创建的时候就已经附加上了许多组件，可以完成一些基本的功能，方便我们使用。

要记住他们本质上还是entity即实体的概念。只不过这个实体增加了一些组件并且封装了一下，变成了常用的一些元素。当然我们也可以自己创造这些基本元素，在以后使用的时候用特定的标签就行。这相当于语法糖，便于使用，减少了重复劳动，提高了效率和复用性。

例如如下的例子，我们创建一个系统内置的box：

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

初上上述写法，我们也可以向如下方式这样写：

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

创建一个实体，并且加上两个组件，这样的效果和用内置标签的效果本质是一样的，但是如果每次都要这样写就显得很麻烦了。

 

二、自定义基本元素（标签）

为了提高复用性，我们注册我们自己的基本元素，即我们自己来封装。

基本格式是AFRAME.registerPrimitive(name,definition)，其中name是这个自定义元素的标签名，definition是用javascript来定义这个元素的属性。

defaultComponent是默认的组件，即当这个元素被实例化成一个实体时，这些默认的组件会自动附加在这个实体上。

mappings是属性映射，将HTML的属性映射到我们自定义的属性上去。

 

AFRAME.registerPrimitive('a-ocean', {

 默认附加的组件以及初值

  defaultComponents: {

   ocean: {},

   rotation: {x:-90, y: 0,z: 0}

  },

 映射HTML的属性到ocean组件的属性上

  mappings: {

   width: 'ocean.width',

   depth: 'ocean.depth',

   density: 'ocean.density',

   color: 'ocean.color',

   opacity: 'ocean.opacity'

  }

});

这是一个注册元素的实例，元素的名字为a-ocean，默认的组件为ocean和rotation，其中ocean是通过外部引入的组件（代码中没有体现出来）。下面的mappings的属性值之间的映射，例如将HTML的width映射到ocean组件里面定义的width上。

         好了我们现在已经注册好了一个属于我们自己的元素，那么下面就可以开始使用了

<a-oceancolor="aqua"depth="100"width="100"></a-ocean>

如上的使用方式和内置的基本元素的使用方法类似。