javascript - 如何将已注册组件的实例正确附加到 Aframe 中的场景？

Question

我想在 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);
    }
  });

Answer 1

附加一个名为 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>

fiddle here 。它也有很好的记录 here 。

<小时/>

以线路为例，您可以简单地拥有一个“经理”实体，并附加线路。

<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 可以帮忙。