AFrame extend component and override

Question

Я пытаюсь расширить компонент a-animation, но переопределить некоторые функции.

Я хочу добавить атрибут состояния к родительскому «el», и только если родительское это состояние, событие mouseenter фактически инициирует анимацию.

Я надеюсь, что мне не нужно перезаписывать или требовать запрос Pull, чтобы облегчить эту дополнительную функциональность, поскольку это замедлит тестирование и удобство использования для меня, но я хотел бы иметь возможность использовать основной код и только «добавить или переопределить».

Answer 1

Я приехал сюда в поисках тот же ответ, "Как продлить компонент". Я хотел написать некоторую пользовательскую логику для компонента look-controls, поэтому я расскажу о том, что я узнал о расширении компонентов.

Прежде всего, я рекомендовал бы сделать копию на компоненте, чтобы избежать повреждения исходного компонента (на всякий случай, если вы используете его в другом месте). Я использую Angular, поэтому у меня есть хорошая утилита для deep copy, но вы можете использовать все, что захотите. (Похоже, что у A-Frame есть некоторые утилиты, которые могут это сделать, но нет документов о том, как их использовать: AFRAME.utils.extend, AFRAME.utils.extendDeep). Копирование зависит от вас.

В любом случае, вот как вы можете продлить существующий компонент:

// Get a copy of the original component. 
var customLookControls = angular.copy(AFRAME.components['look-controls']), 
    customLookControlsComponent = customLookControls.Component; 

// Add your custom logic to component. 
customLookControlsComponent.prototype.myNewMethod = function() { // Something awesome. }; 

Вот как вы регистр это:

AFRAME.registerComponent('custom-look-controls', customLookControls); 

И, наконец, вот как вы бы использование it:

<a-entity custom-look-controls></a-entity> 

---

UPDATE

Локально я обнаружил, что создание нового компонента на основе офф уже существующего, не работает так, как я ожидал, что это. Так, в гораздо более простой способ, я обнаружил, что это довольно легко расширить существующий компонент:

// Get a reference to the component we want to extend. 
var lookControls = AFRAME.components['look-controls'], 
    lookControlsComponent = lookControls.Component; 


/** 
* Overrides the Touch event handler... 
* @param {!Event} e The touch event object. 
*/ 
lookControlsComponent.prototype.onTouchMove = function(e) { 
    // Replace the TouchMove event handler... 
}; 

/** 
* New/custom method... 
*/ 
lookControlsComponent.prototype.somethingNew = function() { 
    // My awesome logic here. 
}; 

Answer 2

Вы можете использовать JavaScript для запуска анимации всякий раз, когда захотите.

<a-entity id="foo"> 
    <a-animation begin="bar"></a-animation> 
</a-entity> 

if (whateverCondition) { 
    document.querySelector('#foo').emit('bar'); 
} 

Или с помощью компонента анимации (https://github.com/ngokevin/kframe/tree/master/components/animation):

<a-entity id="foo" animation="startEvents: bar"></a-entity> 

if (whateverCondition) { 
    document.querySelector('#foo').emit('bar'); 
}