工具(Utils)
优质
小牛编辑
128浏览
2023-12-01
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 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 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, ...])
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
处理程序,因为它使用了全局渲染循环中传递的t
和dt
时间戳。
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) {}}); |