AFrame扩展组件和覆盖

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'); 
}