a-frame 导航栏，仅水平移动答案

【问题标题】：a-frame navigation bar, that moves horizontal onlya-frame 导航栏，仅水平移动
【发布时间】：2018-09-24 02:55:25
【问题描述】：

我需要知道，如何创建一个带有 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>

【问题讨论】：

它对我有用，我添加了一个工作小提琴

标签： three.js virtual-reality aframe webvr

【解决方案1】：

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

<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>

通过这种方式，您可以创建一个脚本来使用相机移动实体，或者在相机更改时移动对象，或者在 tick() 上移动它：

  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");
  }
});

工作小提琴here。

【讨论】：