Изменить клонированный объект в кадре

Я кодирую свой второй проект 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>

Затем я клонирую это дерево с помощью этого скрипта:

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

Клонирование работает нормально. Но как изменить радиус цилиндра? Или есть лучший способ клонировать объекты в кадре?


clone aframe
person kinnla    schedule 28.07.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы двигаться дальше, я определил специальный компонент для дерева:

<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>

Затем можно создать экземпляр компонента и изменить его параметры:

<a-entity tree></a-entity>
<a-entity tree="crown: 4; trunk: 0.7; height: 12" position="3 0 0"></a-entity>

Однако это решение следует парадигме класса / экземпляра, а не шаблону прототипа. А в образовательном контексте предпочтительнее было бы решение, скрывающее javascript от студентов.

person kinnla    schedule 28.07.2018

arrow_upward
0
arrow_downward

Обратите внимание, что A-Frame следует парадигме компонентов сущности: отличной от наследования класса / экземпляра или прототипа. Компонент дерева настраивает объект как дерево, а другие дополнительные компоненты могут изменять или добавлять эту первоначальную конфигурацию. Вы можете познакомить учащихся с узором. Документация A-Frame - хорошая отправная точка

person Diego Marcos    schedule 30.07.2018