在 enter-vr 事件上更改组件

Question

我正在为 A-Frame 开发 scrim component，希望它在进入 VR 模式时 "turn off"。我可以在组件的哪个位置监听 enter-vr 事件以便删除动画？

我在组件的初始化中添加了不透明度的动画设置。我不知道在哪里添加一个enter-vr的监听器来移除添加的动画。

  init: function () {
    var thisEl = this.el;
    var data = this.data

    var properties = 'property: material.opacity; from: 0; to: 1; dir: alternate; loop: true'
    properties = properties.concat(properties,'; dur: ', data.durration, '; easing: ', data.easing)

    thisEl.setAttribute('animation', properties)

    document.querySelector('a-scene').addEventListener('enter-vr', remove())

  },

  remove: function () {
    var thisEl = this.el;

    thisEl.setAttribute('animation', '')
   },

我希望 init 函数中的侦听器在 enter-vr 触发时调用 remove 函数。

Answer 1

方法未正确附加。试试这个：

document.querySelector('a-scene').addEventListener('enter-vr', this.remove.bind(this));

您的代码正在调用函数并将结果传递给 addEventListener 而不是对函数本身的引用。我建议阅读 JavaScript 中的函数声明、语句和作用域，以便更好地理解。

还可以使用 removeAttribute 删除组件：

thisEl.removeAttribute(“animation”);

使用 setAttribute，您可以将属性设置为默认值，而不是删除组件。文档中的附加信息：https://aframe.io/docs/0.9.0/introduction/javascript-events-dom-apis.html#removing-a-component-with-removeattribute

在 enter-vr 事件上更改组件

Alter component on enter-vr event

aframe