分类：tuo-fair-core文档

作为一个react组件，它将至少可以接收以下props：

propTypes = {
  token: String, //用户的token
  label: String, //此参数的标签
}

此组件的主要依赖为face3d-query项目，face3d-query项目将完成face3d集合相关信息的检索，上传，移除等任务。例如:

import {upload, findAll, init, find, remove} from 'face3d-query'

init(token, baseUrl)  //初始化face3d-query的请求token和请求的基本Url,例如http://test.tuocad.com/tuo-fair-backend

findAll().then(results => console.log(results)) //打印当前用户所有的face3d数据
find(id).then(result => console.log(result)) //打印当前用户所指定的face3d.id的数据
upload(data).then(result => console.log(result)) //打印上传当前数据的结果 {result: 'ok'}为成功, {result: 'error', msg: String} //为上传失败和失败原因
remove(id).then(result => console.log(result)) //打印移除指定数据的结果, 结果的格式与upload相同。

此组件将在合适的位置和时间，提供用户对face3d数据的查寻，移除和上传功能。

1.基本数据结构

{
   [key]: {
      type: String, // 类型
      value: Any,  // 当前的值
      defaultValue: Any, // 默认值
      label: String, // 展示在界面上的参数名称
      options: Object, // 其他属性
   }
}

2. 具体参数调整器的options说明

2.1 数字输入类

{
  type: 'adjustorNumber',
  value: Number,
  defaultValue: Number,
  label: String,
  options: {
      precision: Number, // 小数点精度，表示保留几位小数
      step: Number, // 点击梯度变化按钮时的增减梯度，是正数
      hideStep: Boolean, // 是否隐藏梯度变化按钮，默认是false
      min: Number, // 最小值
      max: Number // 最大值
  }
}

2.2 图形选择枚举对象类

这类参数是指用一张图片来示意此参数值达成的效果，然后用一个对象来作为这个参数的实际值。此类参数主要用在需要用图片才能表达参数值的效果的情况。例如，用来调整材质的参数，这时候就需要提供一张图片来表示当前参数值能达成的渲染效果。此类参数的数据结构如下：

{
  type: 'imageEnumObject',
  value: Number,
  defaultValue: Number,
  label: String,
  options: {
      images: [<url_to_images>, ...]
      objects: [Any,...]
  }
}

2.3 图片输入类

{
   type: 'imageInput',
   value:  String, // 图片的 url
   defaultValue: String, // 图片的 url
   label: String,
   options: {
     width: Number,
     height: Number,
     aspect: Number, //optional
     texture: {
       wrapT: oneOf(['RepeatWrapping', 'MirroredRepeatWrapping', 'ClampToEdgeWrapping' ]), //default: 'ClampToEdgeWrapping',
       wrapS: oneOf(['RepeatWrapping', 'MirroredRepeatWrapping', 'ClampToEdgeWrapping' ]), //default: 'ClampToEdgeWrapping'
     }
   }
 }

图片输入类参数options中的aspect如果存在的，则表示输入的图片需要先进行一步变形。这里的aspect值是指uv值应用到3维对象上后，3维空间上u的长度比上v的长度的比值。例如，下面杯子所示：

如果杯子外壁上的uv展开值是铺满的，那么这里的aspect就应该满足如下的情况：

aspect = 外壁的周长 / 外壁的高度

2.4 一般选择类

{
  type: 'enum',
  value: ,
  defaultValue: ,
  label: String,
  options: {
     mutiple: Boolean, // 是否多选
     options: ArrayOf(String) | ArrayOf({lable: String, value: String}), // 若是String数组，则每个元素都必须唯一；若是Object数组则每个元素的value必须唯一
  }
}

2.5 人像选择类

{
   type: 'faceEnum',
   value:  String || null, // face3d的id
   defaultValue: null,
   label: String
 }

tuo-fair的阻塞源自于tuo-fair的异步计算的引用。在执行一些动作前，我们可能希望该动作发生在异步计算之后，因此而引入了阻塞的概念。目前阻塞主要用在动画的执行过程中。动画步骤的执行顺序有时需要执行在异步计算完成之前或者之后。

tuo-fair-core的document.js里面创立了两个函数：wrapBlockBefore和wrapBlockAfter。这两个函数都是接受tuo-engine的控制单元为输入，然后在输出一个tuo-engine的控制单元。wrapBlockBefore函数输出的控制单元能确保输入的控制单元执行之前异步运算已经结束，也就是阻塞在执行单元之前。相反wrapBlockAfter是能够确保阻塞在执行单元之后。

用户添加动画时，可以通过调用addAnimator函数时，传递第二个参数来控制此执行单元是否要封装成阻塞体。addAnimator的第2个参数为undefined时没有阻塞，'before'和'after'分别对应阻塞在控制单元之前还是之后。

阻塞的应用除了用户在调用addAnimator函数时可以手动控制之外，还应用在启动动画时的自动应用。例如在启动动画控制的时候，tuo-fair-core会给刚刚启动的那个控制单元封装成阻塞在控制单元之前的阻塞体。