Question

我正在编写第二个aframe项目，以更好地了解框架的工作原理。对于森林，我定义了原型树

<a-entity id="tree">
  <a-cylinder id="cylinder" radius="0.3" height="5" color="#754" position="0 2.5 0"></a-cylinder>
  <a-cone radius="2" height="4" color="#6d4" position="0 7 0"></a-cone>
</a-entity>

然后我在this script的帮助下克隆了这棵树：

<a-entity clone="#tree" position="2 0 0"></a-entity>

克隆工作正常。但是如何修改圆柱体的半径？还是有更好的方法克隆框架中的实体？

Answer 1

为了前进，我为树定义了专用组件：

<input class="form-control" name="image" id="image" type="file" accept="image/jpg, image/gif" multiple>

然后可以实例化该组件并修改其参数：

<script>
AFRAME.registerComponent('tree', {
  schema: {
    height: {type: 'number', default: 9.0},
    crown: {type: 'number', default: 2.0},
    trunk: {type: 'number', default: 0.3}
  },

  init: function () {
    let trunk = document.createElement('a-cylinder');
    trunk.setAttribute('radius', this.data.trunk);
    trunk.setAttribute('height', this.data.height * 5.0/9.0);
    trunk.setAttribute('color', "#754");
    trunk.object3D.position.y += this.data.height * 5.0/18.0;
    this.el.appendChild(trunk);

    let crown = document.createElement('a-cone');
    crown.setAttribute('radius-bottom', this.data.crown);
    crown.setAttribute('height', this.data.height * 4.0/9.0);
    crown.setAttribute('color', "#6d4");
    crown.object3D.position.y += this.data.height * 14.0/18.0;
    this.el.appendChild(crown);        
  }
});
</script>

但是，此解决方案遵循类/实例范式，而不是原型模式。而且在教育方面，最好选择一种对学生隐藏javascript的解决方案。

Answer 2

请注意，A-Frame遵循实体组件范例：与类/实例或原型继承不同。您的树组件将实体配置为树，其他组件也可以修改或添加该初始配置。您可以将模式暴露给学生。 The A-Frame documentation is a good starting point

修改框架中的克隆实体

2 个答案: