我想在 Aframe 中创建一个新组件并将其附加到我的场景中。但我不太明白它应该如何使用。
例如我有这个组件行: 如何创建组件的实例并将其附加到我的场景? 另外我如何在创建时正确设置参数?
我查看了 Aframe 文档,其说明如下:
AFRAME.registerComponent('hello-world', {
init: function () {
console.log('Hello, World!');
}
});
document.querySelector('a-scene').setAttribute('hello-world', '');
但是这个示例不足以让我知道如何使用它。
我想创建该组件的多个实例: 我希望你能帮助我。
AFRAME.registerComponent('line', {
schema: {
color: {type: 'string', default: '#8b4513'},
points: {type: 'array', default: []},
},
init: function () {
console.log(this.data.color);
}
});
最佳答案
附加一个名为 hello-world
的组件可以通过多种方式实现:
// no properties / default
setAttribute('hello-world', '')
// assuming there are properties in the schema
setAttribute('hello-world', 'property', 'value')
setAttribute('hello-world', {
'propertyOne': 'valueOne',
'propertyTwo': 'valueTwo'
})
// another instance - if multiple enabled
setAttribute('hello-world__one', 'property', 'value')
<小时/>
如果定义组件的 multiple
属性,则可以附加组件的多个实例:
AFRAME.registerComponent('foo',
multiple: true
// .....
})
您可以像这样附加多个组件:
<a-entity foo="" foo__one="" foo__two=""></a-entity>
<小时/>
以线路为例,您可以简单地拥有一个“经理”实体,并附加线路。
<script>
AFRAME.registerComponent('line-manager', {
init: function() {
this.el.setAttribute("line__one", {
"start": '0 0 0",
"end": '1 2 3'
})
this.el.setAttribute("line__two", {
"start": '0 0 0",
"end": '3 2 1'
})
}
})
</script>
<a-scene>
<a-entity line-manager></e-entity>
也许this fiddle 可以帮忙。
关于javascript - 如何将已注册组件的实例正确附加到 Aframe 中的场景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57162903/