Three.js a形框架导航栏，仅水平移动

我需要知道，如何创建一个带有pre、home和next按钮的导航栏

该条应位于光标下方，并沿光标水平移动。这样，当你向下看时，你可以点击按钮

我已经有了3个按钮，它们可以移动光标，但现在它们只能水平移动，不能垂直移动

<a-assets>

<a-mixin id="pre"  geometry="primitive: circle; radius: 0.1" material="color:blue; opacity:0.2"></a-mixin>
<a-mixin id="home" geometry="primitive: circle; radius: 0.1" material="color:green; opacity:0.2"></a-mixin>
<a-mixin id="next" geometry="primitive: circle; radius: 0.1" material="color:#fe0000; opacity:0.2"></a-mixin>

</a-assets>

<a-entity camera look-controls>
<a-cursor ></a-cursor> 
<a-entity mixin="pre" position="-0.2 -0.5 -2"></a-entity>
<a-entity mixin="home" position="0.05 -0.5 -2"></a-entity>
<a-entity mixin="next" position="0.3 -0.5 -2"></a-entity>
</a-entity>

---

当您将实体放在光标内时，它将完全像光标一样移动，除非您在所需位置制作脚本阻止它。
但是，我认为，您应该创建一个由按钮组成的实体：

<a-entity id="button_wrapper" position="0 0 -3" camera-check>
    <a-entity mixin="pre" position="-0.2 -0.5 -2"></a-entity>
    <a-entity mixin="home" position="0.05 -0.5 -2"></a-entity>
    <a-entity mixin="next" position="0.3 -0.5 -2"></a-entity>
</a-entity>
<a-entity id = "camera" camera look-controls>
    <a-cursor >
    </a-cursor>
</a-entity>

---

工作小提琴。

对我有用，我加了一把工作小提琴

  AFRAME.registerComponent('camera-check', {
  init: function () {
     var rotation;
     camera = document.querySelector('#camera');
     camera.addEventListener('componentchanged', function(evt) {
         if (evt.detail.name === 'rotation') {
         // here You have your new rotation reference in evt.detail.newData
         // and Your old rotation reference in evt.detail.oldData

         this.el.setAttribute("rotation","0 "+evt.detail.newData.y+" 0");
         }
     });
  },
  tick: function(){
    // this.el.setAttribute("rotation","0 "+document.querySelector('a-box').getAttribute("rotation").y)+" 0");
  }
});