AFrame扩展组件和覆盖

2 回答

• 2

  我来这里寻找相同的答案，"How to extend a component" . 我想为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);
  

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

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

  回复于 2024-04-28T16:23:47+08:00
• 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');
  }
  

  回复于 2024-04-28T16:23:47+08:00