AFrame 扩展组件并覆盖

Question

我正在尝试扩展 a-animation 组件但覆盖了一些功能。

我想给父级添加一个状态属性 "el"，并且只有当父级具有该状态时，mouseenter 事件才会真正触发动画。

我希望我不需要重写或不需要 Pull 请求来促进此附加功能，因为这会减慢我的测试和可用性，但我希望能够使用主要代码并且只有 "add or override" 功能。

Answer 1

您可以随时使用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');
}

Answer 2

我来这里寻找相同的答案，"How to extend a component"。我想为 look-controls 组件编写一些自定义逻辑，所以我将分享我在扩展组件方面学到的知识。

首先，我建议对组件进行复制，以避免对原始组件造成任何损坏（以防万一您在别处使用它）。我正在使用 Angular，所以我有一个很好的实用程序 deep copy, but you can use whatever you like. (It looks like A-Frame has some utilities that might do this, but there are no docs as to how to use them: 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);

最后，下面是您将如何使用它：

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

更新

在本地，我发现基于现有组件创建新组件并没有按我预期的方式工作。因此，以更简单的方式，我发现扩展现有组件非常容易：

// 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.
};

AFrame 扩展组件并覆盖

AFrame extend component and override

aframe