A-Frame中文教程

工具(Utils)

A-Frame通过AFRAME.utils来开放一些工具类实用程序。

AFRAME.utils.coordinates

三维和四维向量类型的处理模块

.isCoordinates (value)

测试一个字符串是否是vec3。

AFRAME.utils.coordinates.isCoordinates('1 2 3')
// >> true

.parse (value)

把“x y z”字符串解析为一个{x, y, z} vec3对象。或者解析“x y z w”字符串为一个{x, y, z, w} vec4对象。

AFRAME.utils.coordinates.parse('1 2 -3')
// >> {x: 1, y: 2, z: -3}

.stringify (data)

{x, y, z} vec3对象转换为一个“x y z”字符串。

AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
// >> "1 2 -3"

AFRAME.utils.entity

.getComponentProperty(entity, componentName, delimiter='.')

Entity.getAttribute功能类似,但支持为多属性组件返回单个属性。componentName是一个字符串,既可以是组件名,也可以是以属性名分隔的组件名。

// <a-entity id="box" geometry="primitive: box"></a-entity>
var entity = document.querySelector('#box');
AFRAME.utils.entity.getComponentProperty(entity, 'geometry.primitive');
AFRAME.utils.entity.getComponentProperty(entity, 'geometry|primitive', '|');
// >> 'box'
AFRAME.utils.entity.getComponentProperty(entity, 'geometry');
// >> {primitive: 'box', width: 1, ...}

这对于需要引用多属性组件属性的组件非常有用。

.setComponentProperty (entity, componentName, value, delimiter)

功能类似于Entity.setAttribute,但支持为多属性组件设置单个属性。componentname是一个字符串,可以是一个组件名,或以属性名分隔的组件名。

// <a-entity id="box" geometry="primitive: box"></a-entity>
var entity = document.querySelector('#box');
AFRAME.utils.entity.setComponentProperty(entity, 'geometry.width', 1);
AFRAME.utils.entity.setComponentProperty(entity, 'geometry|height', 2, '|');
AFRAME.utils.entity.setComponentProperty(entity, 'geometry', {depth: 3});

AFRAME.utils.styleParser

.parse (value)

把一个类似CSS样式的字符串解析为一个对象。

AFRAME.utils.styleParser.parse('attribute: color; dur: 5000;')
// >> {"attribute": "color", "dur": "5000"}

.stringify (data)

把一个对象转化为一个类似CSS样式的字符串。

AFRAME.utils.styleParser.stringify({height: 10, width: 5})
// >> "height: 10; width: 5"

Object Utils

AFRAME.utils.deepEqual (a, b)

检查两个对象是否具有相同的属性和值,包括嵌入对象。

deepEqual({a: 1, b: {c: 3}}, {a: 1, b: {c: 3}})
// >> true

AFRAME.utils.diff (a, b)

返回两个对象之间的差异。返回的对象的一组键表示哪些值不相等,而一组值是b的值。

diff({a: 1, b: 2, c: 3}, {b: 2, c: 4})
// >> {"a": undefined, "c": 4}

AFRAME.utils.extend(target, source, [source, ...])

对象赋值polyfill

AFRAME.utils.extendDeep (target, source, [source, ...])

深度赋值

AFRAME.utils.device

AFRAME.utils.device.checkHasPositionalTracking ()

检查是否有位置跟踪可用。返回一个boolean

AFRAME.utils.device.checkHeadsetConnected ()

通过寻找定位(方向)数据来检查VR头戴设备是否连接。返回一个boolean

AFRAME.utils.device.isGearVR ()

检查设备是否是Gear VR。返回一个boolean

AFRAME.utils.device.isMobile ()

检查设备是否是手机。返回一个boolean.

功能Utils

AFRAME.utils.throttle (function, interval [, optionalContext])

返回一个限制函数,每minimumInterval毫秒最多调用一次。可以使用this来方便函数处理。

AFRAME.utils.throttleTick (function (t, dt) {...}, interval [, optionalContext])

返回一个限制函数,每minimumInterval毫秒最多调用一次。可以使用this来方便函数处理。

这是.throttle()的一个变体,性能要更好一些,并且适配tick处理程序,因为它使用了全局渲染循环中传递的tdt时间戳。

AFRAME.registerComponent('foo', {
init: function () {
// Set up the tick throttling.
this.tick = AFRAME.utils.throttleTick(this.throttledTick, 500, this);
},
/**
* Tick function that will be wrapped to be throttled.
*/
throttledTick: function (t, dt) {}
});