可能是一个关于在 aframe 框架中索引 VR 控制器数据的基本问题

Question

从 A 框架示例（https://github.com/aframevr/aframe/tree/master/examples/showcase/comicbook）开始，我目前可以使用我的任务控制器（左和右）递增和递减）在快速更改脚本后，但是它们似乎具有独立的索引。例如，如果在第 3 页上并且我右键触发，我会转到第 4 页。然而，如果我从现在的第4页离开triggerdown，我应该转到第5页，但我仍然会再次转到第4页。如果我然后向右按住返回第 3 页，我应该能够向左触发返回第 4 页，但我会转到第 5 页，因为左触发向下将第 4 页索引为当前页。

这是我的 page-controls.js 文件——仅对 A 框架示例进行了稍微修改以包含下一个上一页：

AFRAME.registerComponent('page-controls', {
  init: function () {
    var self = this;
    var el = this.el;
    var pageEl = this.pageEl = document.querySelector('[layer]');
    pageEl.object3D.position.set(0, 1.8, -2.5);

    this.pageIndex = 0;
    this.pages = [
      {
        page: 'page1',
        color: '#494949'
      },
      {
        page: 'page2',
        color: '#d471aa'
      },
      {
        page: 'page3',
        color: '#794782'
      },
      {
        page: 'page4',
        color: '#7d0147'
      },
      {
        page: 'page5',
        color: '#b06c85'
      }];

    this.velocity = new THREE.Vector3();
    this.acceleration = new THREE.Vector3();
    this.friction = 2.0;
    this.onThumbstickChanged = this.onThumbstickChanged.bind(this);
    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    el.addEventListener('thumbstickmoved', this.onThumbstickChanged);
    el.addEventListener('triggerdown', this.nextPage);
    el.addEventListener('gripdown', this.previousPage);
    document.addEventListener('click', this.nextPage); // Adjust the click behavior if needed
    el.addEventListener('bbuttondown', function () { self.zoomOut = true; });
    el.addEventListener('ybuttondown', function () { self.zoomOut = true; });
    el.addEventListener('bbuttonup', function () { self.zoomOut = false; });
    el.addEventListener('ybuttonup', function () { self.zoomOut = false; });
    el.addEventListener('abuttondown', function () { self.zoomIn = true; });
    el.addEventListener('xbuttondown', function () { self.zoomIn = true; });
    el.addEventListener('abuttonup', function () { self.zoomIn = false; });
    el.addEventListener('xbuttonup', function () { self.zoomIn = false; });
    el.addEventListener('thumbstickdown', function () { pageEl.components.layer.toggleCompositorLayer(); });
    this.el.sceneEl.addEventListener('enter-vr', function () { pageEl.object3D.position.set(0, 1.8, -1.5); });
  },

  nextPage: function () {
    this.pageIndex = (this.pageIndex + 1) % this.pages.length;
    this.updatePage();
  },

  previousPage: function () {
    this.pageIndex = (this.pageIndex - 1 + this.pages.length) % this.pages.length;
    this.updatePage();
  },

  updatePage: function () {
    const pageId = this.pages[this.pageIndex].page;
    this.pageEl.setAttribute('layer', 'src', '#' + pageId);
    this.el.sceneEl.setAttribute('background', 'color', this.pages[this.pageIndex].color);
  },

  tick: function (time, delta) {
    var timeDelta = delta / 1000;
    this.updateVelocity(timeDelta);
    this.updatePosition(timeDelta);
    this.zoom(timeDelta);
  },

  updateVelocity: function (delta) {
    this.velocity.x += this.acceleration.x * delta;
    this.velocity.y += this.acceleration.y * delta;

    var scaledEasing = Math.pow(1 / this.friction, delta * 60);
    this.velocity.x = this.velocity.x * scaledEasing;
    this.velocity.y = this.velocity.y * scaledEasing;

    if (Math.abs(this.velocity.x) < 0.0001) { this.velocity.x = 0; }
    if (Math.abs(this.velocity.y) < 0.0001) { this.velocity.y = 0; }
  },

  updatePosition: function (delta) {
    var newX = this.pageEl.object3D.position.x + this.velocity.x * delta;
    var newY = this.pageEl.object3D.position.y + this.velocity.y * delta;

    if (Math.abs(newX) < 1.5) { this.pageEl.object3D.position.x = newX; }
    if (Math.abs(newY) < 2) { this.pageEl.object3D.position.y = newY; }
  },

  onThumbstickChanged: function (evt) {
    this.acceleration.x = evt.detail.x * 80;
    this.acceleration.y = -evt.detail.y * 80;
  },

  zoom: function (delta) {
    var position = this.pageEl.object3D.position;
    if (position.z < -1.0 && this.zoomIn) {
      position.z += 2.5 * delta;
    }

    if (position.z > -1.8 && this.zoomOut) {
      position.z -= 2.5 * delta;
    }
  }
});

我希望将 pageIndex 存储在会话内存中当前页面，以便每个控制器可以分别递增和递减，最终除了 nextPage 和 previousPage 函数之外，最终创建一个“setPage”（监听下拉菜单）函数。

---

重申一下这个问题：如果我从第 1 页开始并向右触发 3 次，我就会转到第 4 页。如果我离开触发器一次，我应该转到第 5 页，但我转到第 2 页。