javascript - 定义组件时组合架构属性类型

Question

我正在编写一个组件，它可以接受 vec3 数组作为架构属性:

AFRAME.registerComponent('control-arrows', {
    schema: {
        'directions': {
            'type': 'array',
            'default': [
                {'x':  1, 'y': 0, 'z':  0},
                {'x': -1, 'y': 0, 'z':  0},
                {'x':  0, 'y': 0, 'z':  1},
                {'x':  0, 'y': 0, 'z': -1}
            ]
        }
    },
    /* init and stuff */
}

如示例所示，我使用了类型array。然而，这种类型的限制不够，因为它应该是 vec3 的array。请注意，vec3 的数量可能会有所不同，因此我无法将 4 个属性与 vec3 类型一起使用。

如何执行这样的限制？更特别的是，如何正确解析 HTML 部分可能是:

<a-entity
    control-arrows: "positions: 1 0 1, -1 0 -1">
</a-entity>

Answer 1

您可以创建自定义属性类型:https://aframe.io/docs/0.5.0/core/component.html#custom-property-type

schema: {
    'directions': {
        'parse': function (val) {
           return val.split(',').map(AFRAME.utils.coordinates.parse);
        },
        'default': [
            {'x':  1, 'y': 0, 'z':  0},
            {'x': -1, 'y': 0, 'z':  0},
            {'x':  0, 'y': 0, 'z':  1},
            {'x':  0, 'y': 0, 'z': -1}
        ]
    }
},