aframe
юридические лица

A-Frame представляет объект через элемент <a-entity> . Как определено в шаблоне entity-component-system, объекты представляют собой объекты-заполнители, к которым мы подключаем компоненты, чтобы обеспечить им внешний вид, поведение и функциональность.

МЕТОДЫ

addState (stateName)

addState будет нажимать на объект. Это будет излучать stateadded событие, и мы можем проверить состояние может за существование с помощью .is:

entity.addEventListener('stateadded', function (evt) {
  if (evt.detail.state === 'selected') {
    console.log('Entity now selected!');
  }
});
entity.addState('selected');
entity.is('selected');  // >> true

emit (имя, детали, пузыри)

emit испускает пользовательское событие DOM для объекта. Например, мы можем выпустить событие для запуска анимации:

<a-entity>
  <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
</a-entity>

entity.emit('rotate');

Мы также можем передавать детали события или данные в качестве второго аргумента:

entity.emit('collide', { target: collidingEntity });

Событие по умолчанию будет пузыриться. мы можем сказать, что это не пузырь, пропуская ложь для пузыря:

entity.emit('sink', null, false);

flushToDOM (рекурсивный)

flushToDOM будет вручную сериализовать данные компонентов объекта и обновить DOM.

getAttribute (имя_компьютера)

getAttribute извлекает анализируемые данные компонента (включая микшины и значения по умолчанию).

// <a-entity geometry="primitive: box; width: 3">
entity.getAttribute('geometry');
// >> {primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ...}
entity.getAttribute('geometry').primitive;
// >> "box"
entity.getAttribute('geometry').height;
// >> 2
entity.getAttribute('position');
// >> {x: 0, y: 0, z: 0}

Если имя_компьютера не является именем зарегистрированного компонента, getAttribute будет вести себя так, как обычно:

// <a-entity data-position="0 1 1">
entity.getAttribute('data-position');
// >> "0 1 1"

getDOMAttribute (имя_компьютера)

getDOMAttribute извлекает только проанализированные данные компонента, которые явно определены в DOM или через setAttribute . Если ComponentName этого имя зарегистрированного компонента, getDOMAttribute будет возвращать только данные компоненты , определенные в HTML как разобранный объект. getDOMAttribute для компонентов является частичной формой getAttribute, поскольку возвращаемые данные компонента не включают в себя прикладные микшины или значения по умолчанию:

Сравните результат приведенного выше примера getAttribute :

// <a-entity geometry="primitive: box; width: 3">
entity.getDOMAttribute('geometry');
// >> { primitive: "box", width: 3 }
entity.getDOMAttribute('geometry').primitive;
// >> "box"
entity.getDOMAttribute('geometry').height;
// >> undefined
entity.getDOMAttribute('position');
// >> undefined

getObject3D (тип)

getObject3D просматривает дочерний элемент THREE.Object3D, на который ссылается тип на object3DMap .

AFRAME.registerComponent('example-mesh', {
  init: function () {
     var el = this.el;
     el.getOrCreateObject3D('mesh', THREE.Mesh);
     el.getObject3D('mesh');  // Returns THREE.Mesh that was just created.
  }
});

getOrCreateObject3D (тип, конструктор)

Если у объекта нет THREE.Object3D, зарегистрированного под типом , getOrCreateObject3D зарегистрирует экземпляр THREE.Object3D с использованием переданного конструктора . Если у объекта есть THREE.Object3D, зарегистрированный под типом , getOrCreateObject3D будет действовать как getObject3D :

AFRAME.registerComponent('example-geometry', {
  update: function () {
    var mesh = this.el.getOrCreateObject3D('mesh', THREE.Mesh);
    mesh.geometry = new THREE.Geometry();
  }
});

Пауза ()

pause () остановит любое динамическое поведение, определенное анимациями и компонентами. Когда мы приостанавливаем работу объекта, он останавливает его анимацию и вызывает компонент Component.pause () для каждого из своих компонентов. Компоненты решают реализовать то, что происходит при паузе, которое часто удаляет прослушиватели событий. Сущность будет вызывать pause () для дочерних объектов при приостановке объекта.

// <a-entity id="spinning-jumping-ball">
entity.pause();

Например, компонент look-controls на паузе удаляет обработчики событий, которые прослушивают ввод.

играть ()

play () начнет любое динамическое поведение, определенное анимациями и компонентами. Это автоматически вызывается, когда DOM присоединяет объект. Когда сущность play () , объект вызывает play () для дочерних объектов.

entity.pause();
entity.play();

Например, звуковой компонент в игре начнет воспроизводить звук.

setAttribute (имя_компьютера, значение, [propertyValue | clobber])

Если ComponentName не имя зарегистрированного компонента или компонента является компонентом одной собственности, SetAttribute ведет себя как обычно:

entity.setAttribute('visible', false);

Хотя если имя_компьютера является именем зарегистрированного компонента, оно может обрабатывать специальный синтаксический анализ для значения. Например, компонент позиции является компонентом с одним свойством, но его синтаксический анализатор свойств позволяет ему взять объект:

entity.setAttribute('position', { x: 1, y: 2, z: 3 });

setObject3D (type, obj)

setObject3D зарегистрирует пройденный объект obj , THREE.Object3D , как тип под объектом object3DMap объекта . A-Frame добавляет obj в качестве дочернего элемента корневого объекта object3D .

AFRAME.registerComponent('example-orthogonal-camera', {
  update: function () {
    this.el.setObject3D('camera', new THREE.OrthogonalCamera());
  }
});

removeAttribute (имя_компьютера, propertyName)

Если имя_компьютера - это имя зарегистрированного компонента, а также удаление атрибута из DOM, removeAttribute также отсоединяет компонент от объекта, вызывая метод жизненного цикла удаления компонента.

entity.removeAttribute('goemetry');  // Detach the geometry component.
entity.removeAttribute('sound');  // Detach the sound component.

Если указано свойствоName , removeAttribute сбросит значение свойства этого свойства, указанное propertyName, на значение свойства по умолчанию:

entity.setAttribute('material', 'color', 'blue');  // The color is blue.
entity.removeAttribute('material', 'color');  // Reset the color to the default value, white.

removeObject3D (тип)

removeObject3D удаляет объект, указанный по типу, из группы THREE.Group и, следовательно, из сцены. Это обновит объект object3DMap объекта , установив значение ключа типа равным null . Обычно это вызывается из компонента, часто в обработчике удаления:

AFRAME.registerComponent('example-light', {
  update: function () {
    this.el.setObject3D('light', new THREE.Light());
    // Light is now part of the scene.
    // object3DMap.light is now a THREE.Light() object.
  },
  remove: function () {
    this.el.removeObject3D('light');
    // Light is now removed from the scene.
    // object3DMap.light is now null.
  }
});

removeState (stateName)

removeState выведет состояние из объекта. Это выдает событие stateremoved , и мы можем проверить состояние его удаления с помощью .is :

entity.addEventListener('stateremoved', function (evt) {
  if (evt.detail.state === 'selected') {
    console.log('Entity no longer selected.');
  }
});
entity.addState('selected');
entity.is('selected');  // >> true
entity.removeState('selected');
entity.is('selected');  // >> false

СОБЫТИЯ

ДЕТАЛИ СОБЫТИЙ

Ниже приведена информация о событии для каждого события: